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Intemet 正在 经 历 惊人 的 巨变 ， 不 仅 有 浩如烟海 的 用 户 人 群 ， 还 有 复杂 多 样 的 联网 设备 ， 网 络 的 
连接 速度 也 与 日 俱 增 。 简 单 的 网 页 设计 技术 已 经 不 能 满足 需求 ，HIML5 和 CSS3 技术 的 更 新 , 更 加 
优化 了 网 页 设计 的 技术 标准 。 

HTML5+CSS3 以 标准 布局 和 精美 样式 , 实现 了 网 页 内 容 和 样式 的 分 离 , 使 网 页 样式 布局 和 美化 
达到 空前 的 高 度 ， 成 为 Web 标准 中 不 可 蔡 代 的 技术 规范 。 本 书 以 知识 点 示例 、 章 节 综合 实例 和 全 书 
综合 实例 等 形式 ， 全 面 涵盖 网 页 设计 的 基础 知识 、HITML5 和 CSS3 技术 等 。 

本 书 共 13 章 , 从 Web 网 页 设计 的 基本 概念 出 发 ， 由 浅 入 深 地 详细 讲述 了 包括 网 页 设计 新 时 代 、 
HIML5 的 演进 、 创 建 HIML5 文档 、 表 格 与 列表 、 图 片 与 富 媒 体 、HTMLS5 表 的 应 用 、CSS3 概述 、 
CSS3 选择 器 、 文本 与 字体 、 应 用 CSS3 的 属性 、 页 面 布局 与 媒介 查询 、 变 形 和 变换 以 及 动画 等 内 容 。 
在 讲述 网 页 设计 的 各 种 技术 时 ， 运 用 丰富 的 实例 ， 注 重 培养 读者 解决 实际 问题 的 能 力 ， 使 大 家 快速 
掌握 应 用 HTML5+CSS3 进行 网 页 设计 的 操作 技术 。 

本 书 内 容 丰 富 、 结 构 合理 、 思 路 清 晰 、 语 言 简 练 流畅 、 示 例 翔实 。 每 一 章 的 引言 部 分 概述 了 该 
章 的 作用 和 内 容 。 在 每 一 章 的 正文 中 ， 结 合 所 讲述 的 关键 技术 和 难点 ， 穿 插 了 大 量 极 富 实用 价值 的 
示例 。 每 一 章 末 尾 都 安排 了 有 针对 性 的 思考 题 和 练习 题 ， 思 考题 有 助 于 读者 巩固 所 学 的 基本 概念 ， 
练习 题 有 助 于 培养 读者 的 实际 动手 能 力 ， 增 强 对 基本 概念 的 理解 和 实际 应 用 能 力 。 

本 书面 向 高 等 院 校 计算 机 相关 专业 师 生 ， 以 及 网 页 设计 爱好 者 和 制作 人 员 。 既 适合 作为 高 等 院 
校 网 页 设计 课程 的 教材 ， 也 可 作为 网 页 设计 应 用 开发 人 员 的 参考 书 。 

参与 本 书 编写 的 人 员 均 为 高 等 院 校 从 事 计算 机 课程 教学 和 研究 的 教师 , 全 书 共 13 章 , 其 中 集 宁 
师范 学 院 的 杨 福 贞 负责 第 1、2、7、8、9 章 的 编写 : 集 宁 师范 学 院 的 何 永峰 负责 第 3、4、10、12 
章 的 编写 : 集 宁 师范 学 院 的 李 岩 负责 第 5、6、11、13 章 的 编写 。 另 外 ， 参 加 本 书 编 写 的 人 员 还 有 薛 
山 、 梁 琦 、 高 宇 飞 、 赵 国 梯 、 丁 奢 、 贾 圣 杰 、 武 红 欣 、 张 晓 菊 、 陈 光 训 、 吴 超群 、 郑 玉 祥 、 付 君 泽 、 
黄 怀 春 、 靳 廷 喜 等 人 。 全 书 整体 框架 设计 由 杨 福 贞 负 责 ， 组 稿 工作 由 李 岩 负责 ， 统 稿 工作 由 何 永峰 
负责 ， 薛 山 及 梁 琦 等 协助 编者 进行 材料 搜集 工作 。 

本 书 在 编写 过 程 中 参考 了 国内 同行 和 广大 实践 工作 者 的 诸多 文献 与 资料 ， 并 引用 了 部 分 材料 与 
成 果 。 在 此 一 并 致 以 深 深 的 敬意 和 衷心 的 感谢 。 
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第 1 章 


网 页 设计 新 时 代 


从 2010 年 开始 ，HTML5 和 CSS3 就 一 直 是 互联 网 技术 中 最 受 关注 的 两 个 话题 。2010 年 ， 在 
MIX10 大 会 上 微软 的 工程 师 在 介绍 IE9 时 ， 从 前 端 技术 的 角度 把 互联 网 的 发 展 分 为 三 个 阶段 : 第 一 
阶段 是 以 Web 1.0 为 主 的 网 络 阶段 ， 前 端 主流 技术 是 HIML 和 CSS; 第 二 阶段 是 Web 2.0 的 Ajax 
应 用 阶段 ， 热 门 技术 是 JavaScripVDOM/ 异 步 数据 请 求 ; 第 三 阶段 为 HIML5+CSS3 阶段 ， 这 两 者 相 
辅 相 成 ， 使 网 页 设计 进入 一 个 诺 新 的 时 代 。 本 章 将 重点 介绍 HTML5 语言 基础 、HTMLS5 的 由 来 及 其 
要 解决 的 问题 、 指 导 进 行 网 页 开发 的 设计 原则 以 及 HIML5 带 来 的 新 特性 ， 为 系统 地 学 习 使 用 
HTML5+CSS3 设计 网 页 英 定 基础 。 


本 章 的 学 习 目标 : 

了 解 Web 网 页 设计 原则 

了 解 HTMLS5 是 如 何 形成 的 

了 解 HTMLS5 的 设计 原则 

了 解 HTMLS5 页 面 的 特征 

了 解 网 页 的 基本 元 素 和 网 页 设计 的 常用 技术 
使 用 HIML 创建 一 些 Web 页 面 


EU Web 周 顶 访 订 有 厢 刚 


本 节 介 绍 开放 Web 标准 的 重要 性 、 构 造 良好 的 语义 化 标记 技术 ， 以 及 编写 良好 的 HTML 是 网 
页 设计 过 程 的 一 部 分 ; 简单 、 直 白 的 HTML 结构 应 当 用 CSS 进行 样式 化 等 。 


1.1.1 Web 标准 


成 立 于 1998 年 的 Web Standards Project(Web 标准 项 目 ，WSP) 一 直 致 力 于 跨 不 同 浏览 器 的 标准 
实现 和 基于 标准 的 Web 设计 方法 。 其 目标 是 降低 Web 开发 的 成 本 与 复杂 性 ， 并 通过 使 Web 内 容 在 
不 同 设 备 和 辅助 技术 之 间 更 具 一 致 性 和 兼容 性 , 提高 Web 页 面 的 可 访问 性 。 他 们 说 服 浏览 器 和 工具 
开发 商 进行 改进 ， 以 支持 World Wide Web Consortium( 万 维 网 联盟 ，W3C) 推 荐 的 Web 标准 ， 如 
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HIML、CSS 等 。 由 此 ，Web 标准 得 到 了 跨 所 有 主流 浏览 器 的 一 致 实现 。 
1. 什么 是 Web 标准 


我 们 在 日 常生 活 中 会 不 经 意 地 用 到 标准 。 例 如 ， 在 买 灯泡 时 ， 我 们 知道 要 买 螺旋 式 或 卡 口 式 灯 
泡 ， 这 样 才 会 与 家 中 的 灯 座 装置 匹配 。 标 准 保证 了 我 们 所 买 的 灯泡 不 会 太 大 ， 也 不 会 太 宽 。 标 准 就 
在 我 们 身边 : 看 看 家 里 的 插头 、 电 器 的 额定 功率 ， 以 及 整个 社会 都 使 用 的 时 间 、 距 离 、 温 度 度量 标 
准 等 。 

Web 标准 出 自 同样 的 道理 。 当 浏览 器 制造 商 和 Web 开发 人 员 都 采用 统一 的 标准 时 ， 编 写 浏览 
器 专用 标记 的 需求 就 减少 了 。 通 过 使 用 结构 良好 的 HIML 对 网 页 内 容 进行 标记 ， 并 使 用 CSS 来 控 
制 网 页 的 呈现 , 我 们 便 可 设计 出 能 在 各 种 标准 兼容 浏览 器 中 显示 一 致 的 Web 网 站 ， 而 不 管 是 什么 样 
的 操作 系统 。 重 要 的 是 ， 当 同样 的 标记 由 基于 文本 的 旧式 浏览 器 或 移动 设备 浏览 器 呈现 时 ， 其 内 容 
仍然 是 可 访问 的 。Web 标准 节约 了 Web 设计 者 的 时 间 ， 让 他 们 坚信 自己 的 杰作 是 可 访问 的 ， 而 不 
管用 户 使 用 的 是 哪 种 平台 或 哪 种 浏览 器 。 


2. 使 用 Web 标准 的 好 处 


使 用 Web 标准 办 法 的 好 处 是 显而易见 的 ， 包 括 如 下 方面 。 

(D 减少 开发 时 间 

只 需要 建立 一 个 单一 的 网 站 ， 便 可 以 在 所 有 平台 、 浏 览 器 、 设 备 上 运行 。 如 果 没有 标准 ， 则 可 
能 需要 为 每 一 种 浏览 器 开发 不 同 的 网 站 。 

(2) 创建 易于 更 新 与 维护 的 网 站 

例如 ， 通 过 Web 标准 和 最 佳 做 法 ， 可 以 更 新 一 个 单一 的 CSS 文件 来 改变 有 若干 HTML 页 面 的 
整个 网 站 的 样式 。 在 这 之 前 ， 我 们 习惯 于 将 样式 信息 放 在 HIML 的 内 部 ， 这 意味 着 要 在 每 个 页 面 上 
修改 这 些 信息 。 这 太 过 烦琐 而 不 便 。 

(3) 改善 搜索 引擎 排名 

HTML 中 的 内 容 是 基于 文本 的 ， 因 而 是 搜索 引擎 可 读 的 。 此 外 ， 编 写 良好 的 副本 和 恰当 使 用 语 
义 化 HIML( 如 标题 )， 可 以 提高 相应 关键 字 的 权重 ， 并 发 送 含有 Google Chart 图 片 的 页 面 。 

(4) 改善 可 访问 性 

编写 良好 的 HIML 和 CSS 可 以 使 Web 站 点 更 易于 让 不 同 用 户 人 和 群 访问 。 例 如 ， 残 疾 人 、 移 动 
设备 用 户 、 使 用 低 带 宽 连 接 的 人 群 等 。 

3. 语义 化 标记 

语义 化 标记 (有 时 也 称 为 POSH， 代 表 Plain Old Semanti HTML) 是 指 要 让 HTML 标记 侧重 于 说 
明 内 容 的 含义 ， 例 如 “这 是 标题 ”“ 这 是 段落 ”等 。 语 义 化 标记 不 关注 内 容 的 表现 层 含义 ， 如 “ 标 
题 用 什么 字体 、 什 么 颜色 、 大 小 如 何 ” 等 ， 这 种 表现 层 含义 属于 CSS 样式 要 解决 的 问题 。 整 个 Web 
页 面 的 设计 过 程 实际 上 被 分 成 若干 层次 ， 其 中 一 个 是 标记 层 ， 以 说 明 内 容 的 含义 ， 即 采用 语义 化 标 
记 来 说 明 内 容 的 含义 ， 这 是 HIML 标记 的 任务 。 另 一 个 是 表现 层 ， 用 以 说 明 内 容 的 样式 或 观感 ， 这 
是 CSS 要 解决 的 问题 。 

语义 化 标记 是 自 描述 的 , 用 正确 的 HTML 元 素 表示 恰当 的 含义 。 例 如， 使 用 如 下 标记 来 表示 一 
个 标题 : 


|| 2 
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<div id="heading" style="font-size:300%; padding: 10px:">My heading</div> 

确实 ， 它 看 起 来 像 一 个 标题 ， 但 它 并 不 是 按照 标题 的 含义 或 目的 而 起 作用 的 。 因 此 ， 在 搜索 引 
擎 优化 (标题 中 的 关键 字 具 有 更 高 的 权重 )、 可 访问 性 (屏幕 阅读 器 会 使 用 标题 元 素 作为 导航 标志 )、 开 
发 (在 使 用 不 当 语 义 元 素 的 情况 下 ， 让 目标 元 素 带 有 样式 和 脚本 会 需要 更 多 技巧 ) 等 方面 ， 都 会 带 来 
负面 影响 。 

使 用 适当 的 元 素 会 好 得 多 ， 参 考 如 下 代码 : 

<hl>My heading</h1> 

语义 化 标记 也 应 该 尽 可 能 轻 量 级 , 也 就 是 要 消除 所 有 那些 嵌 套 的 <div> 标 记 和 其 他 意大利 面条 式 
代码 。 这 可 以 使 文件 更 小 ， 让 编码 更 加 容易 。 


4. Web 标准 层次 

五 彩 缤纷 的 Web 页 面 犹如 蛋糕 一 样 ， 是 很 多 东西 的 混合 体 ， 包 括 语义 化 标记 、 样 式 信息 、 脚 本 / 行 
为 等 。 繁 杂 的 Web 标准 作为 整体 ， 是 运作 整个 Web 世界 的 一 整套 合理 体系 ， 这 也 像 蛋糕 一 样 ， 是 
由 很 多 不 同 的 标准 构成 的 ， 各 种 标准 都 同样 重要 ， 不 可 或 缺 。 其 本 质 是 应 该 将 数据 结构 、 样 式 信息 、 
脚本 /行为 分 离 成 不 同 的 层次 。Web 标准 层次 包括 如 下 这 些 。 

(1) 数据 结构 层 

语义 化 HTML 提供 数据 结构 ， 是 整洁 、 易 于 访问 的 内 容 集 合 。HTMLS5 对 此 提供 很 好 的 支持 。 
应 当 尽 可 能 使 这 种 数据 是 可 用 和 可 访问 的 ， 而 无 须 任 何 样式 方面 的 脚本 强化 。 

(2) 样式 信息 层 

CSS 提供 样式 信息 ， 它 会 利用 数据 并 给 出 用 户 所 期 望 的 可 视 化 呈现 。 与 CSS2 相 比 ，CSS3 提供 
了 功能 更 加 强大 的 工具 。 

(3) 脚本 /行为 层 

JavaScript( 包 括 在 HIML5 中 定义 的 基本 语言 和 脚本 APD 提 供 脚本 /行为 层 ， 这 为 网 站 添加 了 可 
用 性 和 更 丰富 的 功能 。 


1.1.2 “Web 标准 与 浏览 器 的 兼容 性 


浏览 器 的 前 景 正在 朝 着 标准 的 方向 演化 和 靠拢 。Firefox、Safari、Opera、Chrome， 当 然 也 包括 
古老 的 正 ， 都 在 以 不 同 的 速度 朝 着 全 面 支持 HTML5、CSS3 等 标准 的 方向 前 进 。 

但 另 一 个 问题 是 : 不 仅 要 支持 桌面 浏览 器 。 通 过 移动 设备 、 平 板 电脑 、 电 视 、 游 戏 终端 等 ， 在 
移动 过 程 中 访问 Web 的 人 群 快速 增长 。 设 备 的 爆炸 式 增长 ， 如 Apple 的 iPhone 和 iPad、Google 的 
Android 设备 、Blackberry、Wii、DS 以 及 Philips 和 Sony 的 网 络 电视 机 等 ， 极 大 地 增加 了 在 移动 时 、 
在 客厅 以 及 远离 桌面 的 其 他 地 方 访问 Web 的 人 数 。 

随 着 访问 Web 内 容 的 设备 种 类 越 来 越 多 , 精确 预测 网 站 在 各 种 用 户 设备 上 的 外 观 变 得 越 来 越 困 
难 。 因 此 ， 网 页 的 设计 不 应 受 像素 完美 控制 的 困扰 ， 而 是 要 接纳 这 种 不 确定 性 ， 设 计 出 可 适应 不 同 
浏览 环境 的 柔性 网 站 。 


1.1.3 ”可 访问 性 
使 用 Web 设计 标准 会 在 更 广泛 的 设备 上 有 更 好 的 可 访问 性 ， 带 来 更 多 样 的 用 户 等 。 
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设计 网 页 首先 要 关注 不 同 用 户 如 何 使 用 Web。 有 些 人 使 用 不 同 的 设备 或 低速 的 Web 连接 ， 有 
些 人 只 使 用 键盘 ， 有 些 人 使 用 屏幕 阅读 器 阅读 Web 页 面 ， 有 些 人 听 不 到 音频 内 容 。 因 此 ， 要 熟悉 形 
形 色 色 的 Web 用 户 。 不 要 只 是 假设 所 有 人 都 以 相同 的 模式 使 用 Web。 

HIML5 给 Web 网 页 的 可 访问 性 带 来 了 更 广泛 的 便利 。 


1.1.4 ”结构 化 文档 的 Web 


可 以 把 Web 想象 成 由 文档 组 成 的 大 海 , 文档 之 间 相互 关联 , 并 且 与 日 常生 活 中 遇 到 的 打印 文档 
有 着 很 多 相似 性 。 

新 闻 网 站 中 文章 的 结构 与 报纸 上 文章 的 结构 类 似 。 每 一 篇 文章 包含 标题 、 文 本 段落 以 及 一 些 图 
片 ( 有 时 可 能 用 视频 代 蔡 图 片 )。 相 同 点 非常 明显 ， 而 唯一 的 不 同 就 是 : 在 报纸 上 ， 可 以 在 一 个 版 面 
上 放置 多 篇 故事 ， 而 在 网 页 上 ， 每 篇 故事 则 倾向 于 独占 一 个 页 面 。 新 闻 网 站 还 经 常 使 用 首页 显示 新 
闻 头 条 以 及 故事 梗概 。 

又 比如 火车 时 刻 表 ， 火 车 时 刻 表 的 主体 是 一 个 表格 (table)。 从 论文 资助 清单 到 电视 节目 表 ， 每 
一 天 都 会 遇 到 表格 化 的 信息 。 当 这 些 信息 被 放 到 Web 上 时 ， 这 些 表格 就 需要 被 重 构 。 

另 一 种 常见 的 打印 文档 是 表单 (form)。 例 如 ， 保 险 公司 的 一 张 普通 表单 包含 一 些 填写 区 域 ， 用 
以 填写 姓名 、 地 址 以 及 保 额 , 同时 还 有 一 些 复 选 框 , 用 以 指明 房子 的 房间 数 以 及 前 门 锁 的 种 类 。Web 
上 有 很 多 表单 ， 从 简单 询问 寻找 事物 的 搜索 框 ， 到 在 线 订购 书籍 之 前 需要 填写 的 注册 表单 。 

在 上 述 打 印 文档 与 你 看 到 的 Web 页 面 之 间 , 结 构 上 有 着 很 多 相似 性 ,在 编写 Web 页 面 时 , HIML 
代码 会 告知 Web 浏览 器 需要 显示 的 信息 结构 ， 即 什么 文本 放 在 标题 、 段 落 或 表格 中 等 ， 从 而 让 浏览 
器 能 够 恰当 地 将 它们 呈现 给 用 户 。 


HTMLS 槛 运 


2004 年 成 立 的 Web 超 文本 应 用 技术 工作 组 (WHATWG) 创 立 了 HIMLS 规范 ， 同 时 开始 专门 针 
对 Web 应 用 开发 新 的 功能 。2006 年 ，W3C 介入 HIMLS 的 开发 ， 并 于 2008 年 发 布 了 HIMLS 的 工 
作 草 案 。2009 年 ，W3C 停止 对 XHTML 2.0 的 更 新 。2010 年 ，HIML5 开始 用 于 解决 实际 问题 。 这 
时 各 大 浏览 器 厂商 开始 对 旗下 产品 进行 升级 以 支持 HIML5 的 新 功能 , 因此 , HTMLS5 规范 得 到 了 持 
续 性 的 完善 。 


1.2.1 传统 HTML 与 XHTML 


标记 语言 在 我 们 的 日 常 计算 中 无 处 不 在 。 在 传统 的 文字 处 理 文档 中 ， 用 于 描述 结构 与 外 观 的 标 
记 代 码 常常 不 是 后 台 编 码 的 。 在 Web 文档 中 ,传统 HTML 和 XHTML(XHTML 是 使 用 HTML 基于 
XML 语法 规则 建立 的 标记 语言 ) 的 标记 代码 是 明显 可 见 的 。 这 些 非 后 台 的 标记 语言 能 够 将 Web 页 面 
的 结构 与 外 观 传递 给 Web 浏览 器 。 

从 1991 年 底 开 始 推出 至 今 , HIML 和 基于 XML 的 XHTML 都 发 生 了 许多 变化 。 最 早 构 建 Web 
页 面 的 HIML 版 本 并 没有 严格 的 定义 。 然 而 在 1993 年 , Internet Engineering Task Force(IETF) 开 始 标 
准 化 语言 ， 并 且 在 1995 年 发 布 了 第 一 个 真正 意义 上 的 HTML 标准 一 一 HTML 2.0。 在 以 后 很 长 一 段 


和 4 _ 


第 1 章 网 页 设计 新 时 代 


时 间 里 ， 可 能 会 遇 到 其 他 的 标记 版 本 ， 表 1-1 简要 介绍 了 常见 的 HIML 和 XHTML 版 本 。 


表 1-1 常见 的 HTML 或 XHTML 版 本 


HTML 或 XHTML 版 本 说 明 

HIML 2.0 该 版 本 是 Mosaic 等 浏览 器 支持 的 经 典 HTML 版 本 , 支持 HTML 核心 元 素 与 功能 
(例如 表格 和 表单 等 )， 但 是 不 支持 较 新 的 高 级 浏览 器 功能 (例如 样式 表 、 脚 本 、 框 
架 等 ) 

HIML 4.0 Transitional 该 版 本 是 W3C 于 1997 年 12 月 发 布 的 HTML 4.0 过 渡 版 , 保留 了 大 量 HTML 3.2 
中 表示 外 观 的 元 素 。 该 版 本 提供 了 向 层 登 样式 表 (CSS)， 支 持 与 访问 多 语言 环境 
的 元 素 和 特性 ， 以 及 脚本 程序 的 过 渡 

HIML 4.0 Strict 该 版 本 为 严格 的 HTML 4.0 版 本 , 从 HTML 规范 中 删除 了 大 量 表示 外 观 的 元 素 ( 例 
如 fonb， 以 支持 使 用 CSS 的 页 面 格式 

HIML 4.0 Frameset 该 版 本 为 框架 文档 提供 严格 的 语法 ， 这 在 HTML 以 前 的 版 本 中 是 没有 实现 的 


HIML 4.01Transitional/StricUFrameset 
XHTML 1.0 Transitional 


XHTML 1.0 Strict 


XHTML 1.1 


XHTML 2.0 


XHTML Basic 1.0 


XHTML Basic 1.1 


该 版 本 是 对 4.0 标准 版 的 简单 升级 ， 仅 仅 就 原始 版 本 中 的 一 些 错误 进行 了 纠正 
该 版 本 是 HTML 规范 的 XML 应 用 的 改版 .该 版 本 作为 过 渡 版 本 保留 了 HTML 4.0 
过 渡 版 的 基本 外 观 表示 的 功能 , 但 是 同时 向 HTML 应 用 了 严格 的 XML 语法 规则 
该 版 本 是 使 用 XML 的 HTML 4.0 严格 版 本 的 改版 。 该 版 本 将 所 有 表示 外 观 的 职 
责 都 交 给 CSSs 来 完成 

该 版 本 是 XHTML 1.0 的 改版 ， 其 中 对 标记 语言 进行 了 模块 化 ， 以 方便 扩展 或 缩 
减 。 该 版 本 在 本 书 撰写 时 还 没有 得 到 广泛 应 用 , 同时 并 没有 对 严格 的 XHTML 1.0 
做 大 的 改变 

该 版 本 是 对 XHTML 的 新 的 应 用 ， 不 向 后 兼容 XHTML 1.0 和 传统 的 HTML。 
XHTML 2.0 删除 了 所 有 表示 外 观 的 标记 , 并 且 向 语言 中 引入 了 不 同 的 新 标记 和 新 
思想 

该 版 本 是 在 模块 化 的 XHTML 1.1 基础 上 设计 的 ， 是 在 功能 不 太 强大 的 Web 客户 
端 (例如 手机 上 使 用 的 版 本 

该 版 本 是 XHTML 基本 规范 的 改善 版 本 ， 添 加 了 一 些 功能 ， 其 中 一 些 功能 是 针对 
移动 设备 的 界面 设计 的 


1.2.2 HTMLS 是 如 何 形成 的 


HIML5 是 HIML 长 期 发 展 过 程 中 的 一 个 里 程 碑 , 各 种 版 本 的 HIML 以 不 同 规范 形成 了 各 种 编 
码 风格 。 尽 管 它们 可 能 在 细节 方面 有 所 不 同 ， 但 它们 都 有 一 个 共同 的 基本 方面 : HIML 是 一 种 标记 


语言 。 


1. 超越 HTML 4.0 


其 实 ，HTML 4.0 毫 无 错误 之 处 。 它 是 一 个 堪 称 完美 的 规范 ， 而 且 其 技术 与 其 原先 期 望 要 做 的 


工作 完全 一 致 : 标记 出 带 有 相互 链接 的 静态 文档 。 但 是 Web 开发 人 员 不 会 满足 于 只 制作 静态 文档 。 


他 们 希望 制作 具有 应 用 程序 行为 而 不 是 页 面 的 动态 Web 网 站 ， 于 是 使 用 了 诸如 PHP、JavaScript 以 
及 Flash 之 类 的 技术 。 这 就 形成 了 要 演变 的 需求 。 
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注意 : 

Flash 最 初 变 得 流行 的 原因 是 , 20 世纪 90 年 代 后 期 跨 浏览 器 的 Web 标准 支持 实在 太 差 , 而 Flash 
插件 提供 了 一 种 方式 ， 使 内 容 能 够 跨 浏览 器 具有 一 致 的 行为 。 同 时 ，Flash 能 够 让 开发 人 员 在 Web 
页 面 上 做 一 些 动画 、 视 频 之 类 的 事情 。 当 时 ，Web 标准 还 没有 支持 这 些 内 容 的 工具 。 


2. 转向 XHTML 1.0 


1998 年 ，HTML 4.0 规范 几 近 完 成 ，W3C 决定 让 Web 转向 XHTML 而 不 是 HIML， 于 是 终止 
了 HITML 4.0 的 相关 工作 (最 后 一 个 版 本 实际 上 是 HTML 4.01， 它 包括 一 些 bug 修正 等 )， 并 全 力 集 
中 于 XHTML 1.0 规范 。 

2002 年 8 月 ，W3C 在 考虑 HIML 最 佳 演化 的 情况 下 重 磅 推出 最 初 的 XHTML。XHTML 1.0 主 
要 是 以 XML 词汇 重新 整理 了 HTML 4.0, 使 之 具备 XML 的 那 种 更 严谨 的 语法 规则 (例如 , 属性 值 必 
须 有 引号 、 元 素 需 要 关闭 等 )。 目 标 是 拥有 更 好 的 质量 和 更 有 效 的 标记 。 


3. XHTML 2.0 的 失败 


XHTML 的 最 后 一 个 版 本 XHTML 2.0 也 是 精心 编写 的 规范 ,但 它 完 全 没有 反映 出 Web 开发 人 
员 在 Web 页 面 上 实际 要 做 的 工作 ， 也 未 能 对 Web 页 面 上 已 有 的 内 容 做 到 向 后 兼容 。 许 多 特性 的 工 
作 方 式 已 有 所 不 同 ， 例 如 XHTML 的 mimetype(application/xhtml+xml) 在 正 中 根本 不 起 作用 ， 而 且 
浏览 器 中 可 用 的 开发 人 员工 具 尚未 做 好 使 用 XML 的 准备 。 

2004 年 ，WHATWG(www.whatwg.org) 小 组 编写 了 一 个 更 好 的 标记 规范 ， 使 得 具有 一 组 能 更 有 
效 创 建新 品种 Web 应 用 程序 的 特性 ， 重 要 的 是 不 会 打破 向 后 兼容 性 。 

WHATWG 创建 了 Web Application 1.0 规范 ， 它 记录 了 已 有 的 可 交互 浏览 器 行为 和 特性 ， 以 及 
用 于 Open Web 技术 堆栈 (如 API 以 及 新 的 DOM 解析 规则 等 ) 的 新 特性 。 经 过 W3C 成 员 之 间 的 多 次 
磋商 之 后 ，2007 年 3 月 7 日 ， 新 的 HTML 工作 小 组 (HTML Working Group，HIML WG) 以 开放 的 
参与 方式 重新 启动 了 HTML 的 有 关 工 作 。HTML WG 的 首要 决策 之 一 是 ， 采 纳 Web Application 1.0 
规范 并 称 之 为 HIMLS。 

WHATWG 和 W3C 现在 以 两 个 不 同 规范 联合 开发 HTML5 规范 。 

。 WHATWG HTML 规范 是 贡献 者 快速 生成 和 从 事 创造 新 特性 的 地 方 ， 这 是 在 新 特性 被 纳入 
官方 推荐 之 前 的 工作 方式 。 注 意 ， 这 里 去 掉 了 版 本 号 ， 表 明 这 是 一 个 活动 中 的 标准 ， 它 会 
作为 单一 的 整体 ， 以 免除 版 本 化 的 方式 继续 进化 。 

e@ W3C HIML5 规范 是 提供 最 稳定 上 且 被 广泛 认可 的 特性 的 地 方 。 该 版 本 描绘 了 一 幅 真实 画面 ， 
在 这 里 商讨 哪些 特性 是 最 完整 的 且 最 可 能 在 浏览 器 中 得 到 支持 。 


4. HTML5 的 成 功 


在 XHTML 2.0 失败 之 时 ，HTMLS5 已 经 取得 了 成 功 ， 因 为 它 在 开发 时 考虑 到 了 当前 和 未 来 的 浏 
览 器 开发 ， 以 及 过 去 、 现 在 和 将 来 的 Web 开发 任务 。 

HIML5 是 向 后 兼容 的 。 它 包含 HTML 4.0 规范 的 全 部 特性 ， 进 行 了 少量 修改 和 完善 。 它 还 包含 
很 多 用 于 建立 动态 Web 应 用 程序 以 及 创建 更 高 质量 的 标记 所 需 的 附加 素材 ， 例 如 : 

e@ 新 的 语义 化 元 素 ， 可 以 语义 化 地 定义 更 多 标记 成 分 ， 而 不 是 使 用 大 量 的 class 和 耳 。 

e， 新 的 元 素 和 API， 用 于 为 网 站 添加 视频 、 音 频 、 脚 本 化 图 片 以 及 其 他 内 容 。 


| 6 


第 1 章 网 页 设计 新 时 代 


e ”用 于 标准 化 功能 的 新 特性 ， 如 服务 器 发 送 的 更 新 、 表 单 验证 等 。 

e 弥补 功能 不 足 的 新 特性 ， 这 些 是 已 经 在 开放 标准 中 生效 的 功能 。 例 如 ， 定 义 浏览 器 如 何 处 
理 标 记 错误 、 人 允许 Web 应 用 程序 离线 运行 、 将 长 时 间 打开 的 套 接 字 连 接 用 于 应 用 程序 数据 
传输 以 及 音频 、 视 频 、 脚 本 化 图 片 (画布 ) 等 。 

HTMLS 的 许多 内 容 已 得 到 所 有 现代 浏览 器 的 良好 支持 ， 利 用 少量 的 JavaScript 处 理 ， 就 可 以 在 

旧式 浏览 器 中 正常 运行 。 


1.2.3 HTML5 的 设计 原则 


HTML5 的 形成 基于 许多 设计 原则 ， 在 应 用 新 的 标记 时 ， 还 要 有 计划 地 支持 现 有 内 容 。 另 外 
W3C 还 定义 了 以 下 原则 : 
确保 支持 现 有 内 容 
在 旧式 浏览 器 中 让 新 特性 能 够 优雅 降级 ; 
不 要 重新 发 明 ; 
铺 平 老路 ; 
进化 而 非 革命 
能 够 普遍 访问 。 

与 XHTML 2.0 不 同 ，HTMLS 对 标记 采取 务实 的 办 法 ， 有 助 于 让 “真实 世界 ”的 办 法 战胜 开发 
XHTML 2.0 时 所 采用 的 不 切实 际 的 办 法 (这 些 办 法 最 终 导 臻 XHTML 2.0 的 消亡 )。 这 种 务实 办 法 让 
我 们 能 够 现在 就 使 用 HTML5， 坚 信 它 会 朝 着 期 望 的 目标 前 进 。 


1. 支持 现 有 内 容 


2019 年 是 Web 诞生 以 来 的 第 29 个 年 头 。 它 的 非凡 增长 是 历史 上 绝无仅有 的 ， 而 且 现在 已 有 数 
十 亿 计 的 Web 页 面 。HIMLS 的 发 展 核心 就 在 于 支持 所 有 现 有 内 容 的 重要 性 。 

HTMLS5 并 非 推陈出新 ， 而 是 保持 现状 ， 并 添加 新 的 增强 功能 。 基 于 这 一 思想 ，W3C 指出 : 应 
当 尽 可 能 将 现 有 HTML 文档 处 理 成 HTMLS5 文档 ， 并 根据 现 有 浏览 器 的 行为 ， 得 到 与 用 户 和 作者 的 
当前 期 望 相 兼容 的 结果 。 

简 言 之 , 当 HIMLS 施行 时 , 要 考虑 如 何 对 用 旧版 HTML 设计 和 开发 的 已 有 内 容 做 适当 处 理 。 

支持 现 有 的 内 容 ， 这 一 点 非常 重要 ， 因 为 很 多 人 都 认为 HTMLS5 很 新 ， 它 应 该 代表 着 未 来 发 
展 的 方向 ， 应 该 把 Web 推 向 一 个 新 的 发 展 阶段 。 但 必须 考虑 支持 已 有 的 内 容 ， 只 要 想 构建 一 款 浏 
览 器 ， 就 必须 记 住 一 条 原则 : 必须 支持 已 有 的 内 容 。 

例如 ， 下 面 的 代码 展示 了 编写 同样 内 容 的 4 种 不 同方 式 。 上 面 是 一 个 img 元素， 下面 是 带 一 
个 属性 的 段落 元 素 ，4 种 写法 唯一 的 不 同 就 是 语法 。 把 其 中 任何 一 段 代 码 交 给 浏览 器 ， 浏 览 器 都 
会 生成 相同 的 DOM 树 , 如 图 1-1 所 示 。 从 浏览 器 的 角度 看 , 这 4 种 写法 没有 区 别 , 因此 在 HTML5 
中 可 以 随意 使 用 下 列 语法 。 

<img sre=" tomato.png" alt="bar" /> 

<p class=" tomato png"> 你 好 ，HIML5! </p> 


<img src="tomatopng" alt="bar" > 
<p class="tomato png"> 你 好 ，HITMLS! 
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<IMG SRC="tomato.png" ALT-"bar> 
<P CLASS="tomato png"> 你 好 ，HIML5! </P> 


<img src=tomato .png alt=bar> 
<p class=tomato.png> 你 好 ,HTML5! <p> 


中 编号 同 栏 内 窑 的 4 御 不 同方 式 x 二 


C Ofile/o/HIMLS+C.. 让 国 日 :; 


你 好 ,HTML5 ! 


图 1-1 相同 内 容 的 4 种 不 同 编写 方式 在 浏览 器 的 显示 效果 相同 
HTML5 同时 允许 这 些 写 法 ， 对 于 那些 写 了 很 多 年 XHTML1.0 代码 ， 已 经 非常 适应 严格 语法 的 
开发 人 员 来 说 ， 这 是 难以 适应 的 ， 但 站 在 浏览 器 的 角度 ， 这 些 写法 实际 上 是 一 样 的 ， 肯 定 没有 什么 
问题 。 
HITMLS 必须 支持 已 有 的 内 容 ， 而 已 有 的 内 容 就 是 这 个 样子 的 ， 浏 览 器 没有 别 的 选择 。 


2. 优雅 降级 


与 支持 现 有 内 容 一 致 ， 在 HTMLS5 演化 过 程 中 ，W3C 的 HTML 设计 原则 要 确保 考虑 到 旧式 浏 
览 器 如 何 处 理 新 元 素 。 要 使 Web 内 容 能 够 在 旧式 或 低能 力 的 用 户 代理 中 优雅 降级 ， 即 使 在 利用 新 的 
元 素 、 属 性 、API 以 及 内 容 模 型 的 情况 下 也 没有 问题 。 

HIMLS 遵循 这 条 原则 的 例子 ， 就 是 使 用 type 属性 增强 表单 。 下 面 列 出 了 可 以 为 type 属性 指定 
的 新 值 ， 有 number、search 和 range 等 。 

Input type=" number" 

TInput type=" range” 

Input type=" email" 

Input type="date" 

TInput type=" url" 

最 关键 的 问题 在 于 浏览 器 看 到 这 些 新 的 type 值 时 会 如 何 处 理 。 那些 无 法 理解 这 些 新 的 type 值 的 
浏览 器 会 将 type 值 解释 为 text。 

例如 ， 现 在 输入 type="number"。 假 设 需要 一 个 输入 数值 的 文本 框 ， 那 么 可 以 把 这 个 input 元 素 
的 type 属性 设置 为 number。 能 识别 它 的 浏览 器 (如 Chrome 浏览 器 ) 就 会 呈现 一 个 带 小 箭头 图 标的 微 
调 框 ， 如 图 1-2 所 示 。 而 在 不 能 识别 它 的 浏览 器 中 则 会 出 现 一 个 文本 框 。 
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口 输入 数值 的 文本 框 x “十 
4 > CC gfile/W/GVHTML5+ 人 © 


输入 数值 的 文本 框 


图 1-2 将 type 属性 设置 为 number 后 Chrome 浏览 器 中 的 显示 效果 


3. 不 要 重新 发 明 


关于 HTML5 引入 的 新 元 素 的 命名 方式 ，HIML5 考虑 了 过 去 的 情况 。W3C 特别 强调 ， 不 要 重 
新 发 明 ， 或 是 让 它 不 那么 正规 ，“ 如 果 没 被 打破 ， 就 别 修正 它 ”。 

也 就 是 说 ， 如 果 涉 及 特定 使 用 场合 的 技术 已 经 有 了 广泛 的 应 用 和 实现 ， 那 么 只 需要 考虑 延续 这 
种 技术 , 而 不 是 针对 同样 目的 去 发 明 某 种 新 的 东西 。 以 前 大 家 所 熟悉 的 大 部 分 东西 都 包含 在 HIML5 
开发 中 ， 因 而 应 该 不 需要 重新 学 习 所 有 东西 。 


4. 铺 平 老路 


铺 平 老路 的 本 质 含义 是 ， 如 果 一 条 工作 路 径 或 一 种 工作 方式 已 经 经 历 了 自然 进化 ， 并 在 开发 人 
员 中 普遍 使 用 , 那么 更 好 的 方式 是 继续 使 用 而 不 是 取代 。 在 官方 规范 中 要 提倡 并 采纳 事实 上 的 标准 。 
例如 在 HTML5 引入 新 元 素 的 名 称 时 ， 就 是 按照 这 一 设计 原则 实现 的 。 


5. 进化 而 非 革命 


正如 W3C 所 说 : 革命 有 时 会 让 世界 变 得 更 好 。 但 大 多 数 情况 下 ， 更 好 的 做 法 是 进化 已 有 的 设 
计 而 非 握 弃 。 这样， 用 户 不 必 学 习 新 模型 ， 内 容 也 会 得 到 延续 。 这 意味 着 减少 现 有 设计 人 员 和 开发 
人 员 重新 学 习 的 需求 。 


6. 能 够 普遍 访问 


HTMLS5 的 普遍 访问 原则 可 以 分 成 3 个 概念 。 

(1) 可 访问 性 : 出 于 对 残障 人 士 的 考虑 ， HTML5 与 WAI(Web 可 访问 性 倡议 ) 和 ARIA( 可 访问 的 
富 Intemet 应 用 ) 做 到 了 紧密 结合 , WALARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添加 到 HIML 中 。 

(2) 媒体 中 立 : 如 果 可 能 的 话 ，HTMLS5 的 功能 在 所 有 不 同 的 设备 和 平台 上 应 该 都 能 正常 运行 。 

(3) 支持 所 有 语种 : 例如， 新 的 <ruby> 元 素 支 持 在 东亚 地 区 页 面 排版 中 会 用 到 的 Ruby 注释 。 


HTMLS 顶 持 皆 牺 得 


本 节 通 过 一 个 较为 完整 的 页 面 来 介绍 HTMLS5 页 面 的 特征 。 
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1.3.1 使 用 HTML5 结构 化 元 素 


通过 研究 Web 页 面 发 现 , 如果 使 用 一 些 带 有 语义 的 标记 ， 可 以 加 快 浏览 器 解释 页 面 中 元 素 的 速 
度 ， 如 早期 的 <samp>、<var> 元 素 。HIML5 继承 了 这 些 元 素 ， 并 根据 用 户 使 用 最 为 频繁 的 类 名 称 和 
了 D 号 不 断 开 发 新 的 标记 , 因为 这 些 标记 能 真正 体现 开发 者 真实 意图 所 在 .下 面 通过 示例 说 明 HTML5 
是 如 何 使 用 这 些 全 新 的 HIML5 特征 来 结构 化 元 素 的 。 

例 1-1: 本 例 将 页 面 分 成 上 、 中 、 下 3 部 分 。 上 部 用 于 显示 导航 ;中 部 分 成 两 部 分 ， 左 边 设置 
菜单 ， 右 边 显示 文本 内 容 ; 下 部 显示 页 面 版 权 信 息 。 该 页 面 在 Chrome 浏览 器 中 的 预览 效果 如 图 1-3 
所 示 。 


<meta http-equiv="content-type” content="text/html; charset=UTF-8" /> 
<title><title> 
<style type="text/css"> 
#header, #siderLeft, #siderRight, #footer { 
border: solid 1px #666; 


<div id="header"> 导 航 </div> 
<div id="siderLeft'> 菜 单 </div> 
<div id="siderRight"> 内 容 </div> 
<div id="footer"> 底 部 说 明 </div> 
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FD -11html i 
© | 加 me///G/n5+css3/n5/L-1-1html 食 | : 


尾部 说明 


1-3 ”简单 的 网 页 布局 
尽管 上 述 代 码 不 存在 任何 错误 ， 还 可 以 在 HTMLS5 环境 中 很 好 地 运行 ， 但 该 页 面 结构 的 很 多 部 
分 对 于 浏览 器 来 说 都 是 未 知 的 ， 这 是 因为 浏览 器 不 能 很 好 地 表明 元 素 在 页 面 中 的 位 置 ， 必 然 影响 页 
面 的 解析 速度 。 幸 好 HTMLS5 中 新 增 的 元 素 可 以 很 快 地 定位 某 个 标记 ， 以 明确 地 表示 页 面 中 的 位 置 。 
将 上 述 代码 修改 成 HTML5 支持 的 页 面 代码 ， 如 下 所 示 ， 效 果 如 图 1-4 所 示 。 


<!DOCTYPE html> 


1 
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<article> 内 容 </article> 
<footer> 底 部 说 明 </footer> 


= == 


DD 42html 四 


| © [© eM/ms+ess: 


图 1-4 使 用 HTMLS 新 增 元 素 后 的 网 页 布局 


虽然 两 段 代码 不 同 ， 但 在 Chrome 浏览 器 中 实现 的 页 面 效 果 相 同 。 从 上 述 两 段 代 码 来 看 ， 使 用 
HIMLS 新 增 元 素 创建 的 页 面 代码 更 加 简单 和 高 效 。 

可 以 看 出 , 使 用 <div id="header">、<div id="siderLeft">、<div id="siderRight"> 和 <div id="footer"> 
标记 元 素 没有 任何 现实 意义 ， 即 浏览 器 不 能 根据 标记 的 id 属性 来 推断 标记 的 真正 含义 ， 因 为 id 是 
可 以 变化 的 ， 不 利于 寻找 。 

而 HTMLS5 中 的 新 增 元 素 <header> 可 以 明确 地 告诉 浏览 器 此 处 是 页 头 , <nav> 标 记 用 于 构建 页 面 
的 导航 ，<article> 标 记 用 于 构建 页 面 内 容 的 一 部 分 ，<footer> 元 素 表明 页 面 已 到 页 脚 或 根 元 素 部 分 
并 且 这 些 标记 都 可 以 重复 使 用 ， 从 而 极 大 地 提高 了 开发 者 的 工作 效率 。 

此 外 ， 有 些 新 增 的 HIMLS 元 素 还 可 以 单独 成 为 区 域 ， 如 下 列 代码 所 示 : 

<header> 

<article> 
<hl> 内 容 1<hl> 
</article> 


在 HIML5 中 ， 一 个 <article> 可 以 创建 一 个 新 的 节点 ， 如 图 1-5 所 示 ; 并 且 每 个 节点 都 可 以 有 自 
己 单独 的 元 素 ， 如 <hl> 或 <h2>， 这 样 不 仅 使 内 容 区 域 各 自分 段 、 便 于 维护 ， 而 且 代 码 简单 ， 局 部 修 
改 方便 。 


D —Mearide> 可 1 x 十 A 


并 GC OfleWGHIMS+C.. 六 国 日 


内 容 1 
内 容 2 


1-5 一 个 <article> 可 以 创建 一 个 新 的 节点 
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1.3.2 使 用 CSS3 美化 HTML5 文档 


在 支持 HTMLS5 新 元 素 的 浏览 器 中 ， 样 式 化 各 新 增 元 素 变 得 十 分 简单 ， 可 以 对 任意 一 个 元 素 应 
用 CSS， 包 括 直接 设置 或 引入 CSS 文件 。 需 要 说 明 的 是 ， 默 认 情况 下 ，CSS 会 默认 元 素 的 display 
属性 值 为 mline。 因 此 ， 为 了 正确 显示 设置 的 页 面 效果 ， 需 要 将 元 素 的 display 属性 设置 为 block。 下 
面 通过 一 个 简单 示例 来 说 明 这 一 点 。 

例 1-2: 在 页 面 中 设置 相关 样式 ， 显 示 一 篇 文章 的 内 容 。 该 页 面 在 Chrome 浏览 器 中 的 预览 效果 
如 图 1-6 所 示 ， 代 码 如 下 。 


<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

<style type="text/css"> 

article {display: block} 

article header p {font-size: 13px} 

article header hl {font-size: 16px} 

Pp-data { font-size: 11px} 

</style> 

<head> 

<body> 

<article> 

<header> 
<h1><a> 使 用 CSS3 美化 HTML5 文档 <la></h1> 
<p class="p-data"> 日 期 ，2018-08-10</p> 
<p> 在 支持 HTMLS5 新 元 素 的 浏览 器 中 ， 样 式 化 各 新 增 元 素 变 得 十 分 简单 ， 可 以 对 任意 一 个 元 素 应 用 CSS， 包 括 直 
接 设置 或 引入 CSS 文件 。</p> 


GC | © fileV/W/FVh5+css3/h5/1-2.html 


使 用 CSS3 美 化 HTML5 文 档 


日 期 : 2018-08-10 


在 支持 HTML5 新 元 素 的 浏览 器 中 ， 样 式 化 各 新 增 元 素 变 得 十 分 简单 ,可 以 
对 任 章 一 个 元 素 应 用 CSS ,包括 直接 设置 或 引入 CSS 文 件 。 
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由 于 有 些 浏 览 器 不 支持 HIML5 中 的 新 增 元 素 ， 如 正 8 或 更 早 版 本 ，CSS 只 能 应 用 于 正 支持 的 
那些 元 素 ; 因此 ， 为 了 能 对 新 增 的 HIMLS5 元 素 应 用 样式 ， 可 以 在 头 部 标记 <head> 中 加 入 如 下 
JavaScript 代码 ， 这 样 就 可 以 应 用 样式 了 。 

<script type="text/javascript"> 

document.createElement('article): 

document.createElement(header): 
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script> 
考虑 到 各 浏览 器 的 兼容 性 不 一 样 ， 可 以 对 上 述 JavaScript 代码 进行 优化 ， 即 使 用 条 件 语句 包含 
这 些 JavaScript 代码 ， 使 浏览 器 只 在 不 支持 HTMLS5 的 情况 下 才 执 行 这 段 脚 本 。 


Web 周 顶 访 订 塌 硅 


要 设计 Web 网 页 ， 应 该 了 解 网 页 的 基本 元 素 和 网 页 设计 的 常用 技术 等 基础 知识 。 


1.4.1 网 页 的 基本 元 素 

网 页 作为 信息 的 载体 ， 包 含 各 种 各 样 的 元 素 。 从 网 页 的 内 容 或 媒体 元 素 的 角度 出 发 ， 网 页 包含 
文本 、 图 像 、 动 画 、 音 频 和 视频 等 ， 从 布局 设计 的 角度 出 发 ， 网 页 包含 标题 、 页 眉 、 主 内 容 区 和 页 
脚 等 。 

1. 网 页 的 基本 媒体 元 素 

从 网 页 包含 的 内 容 来 看 ， 网 页 的 基本 元 素 包括 文本 、 图 像 、 动 画 、 音 频 、 视 频 等 多 种 媒体 元 素 。 
除 此 以 外 ， 元 素 的 超 链 接 也 是 网 页 中 使 用 非常 频繁 的 元 素 。 图 1-7 是 新 浪 网 首页 的 基本 媒体 元 素 。 


图 1-7 网 页 的 基本 媒体 元 素 


(D 文本 

一 般 情况 下 ， 网 页 中 的 信息 以 文本 为 主 。 文 本 一 直 是 人 类 最 重要 的 信息 载体 与 交流 工具 ， 它 能 
准确 地 表达 信息 的 内 容 和 含义 ， 所 以 文本 是 网 页 中 运用 最 广泛 的 元 素 之 一 。 

为 了 丰富 文本 的 表现 力 ， 网 页 设计 与 制作 者 可 以 通过 设置 文本 的 字体 、 字 号 、 颜 色 、 底 纹 和 
边框 等 属性 来 改变 文本 的 视觉 效果 。 但 是 ， 用 于 网 页 正文 的 文字 一 般 不 要 太 大 ， 也 不 要 使 用 过 多 
的 字体 。 

(2) 图 像 
像 是 美化 网 页 必 不 可 少 的 元 素 ， 适 用 于 网 页 的 图 像 格式 主要 有 JPEG、GIF 和 PNG。 图 像 能 


Lu 
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比 文本 更 直观 地 表达 信息 ， 在 网 页 中 通常 起 到 画龙点睛 的 作用 ， 它 能 表达 网 页 的 形象 和 风格 ， 恰 到 
好 处 地 使 用 图 像 能 使 网 页 更 加 生动 和 美观 . 网 页 中 的 图 像 主 要 有 用 于 点 缀 标题 的 小 图 像 、 背景 图 像 、 
介绍 性 的 图 像 、 代 表 企业 形象 或 栏目 内 容 的 标志 性 图 像 、 用 于 宣传 广告 的 图 像 等 多 种 形式 。 

G) 动画 

动画 是 网 页 中 最 活跃 的 元 素 , 创意 出 众 、 制 作 精致 的 动画 是 吸引 浏览 者 眼球 的 最 有 效 方法 之 一 。 
但 是 ， 过 多 的 动画 容易 使 人 眼花 练 乱 ， 进 而 产生 视觉 疲劳 。 

网 页 中 使 用 较 多 的 动画 格式 是 GIF 动画 (或 GIF 图 像 ) 与 Flash 动画 。 GIF 动画 在 浏览 器 中 播放 时 
不 需要 插件 ， 通 常用 于 制作 简单 的 、 只 需要 几 帧 图 片 的 交替 动画 。 使 用 Flash 软件 制作 出 的 动画 质 
量 较 好 ， 许 多 网 页 中 的 大 型 、 复 杂 的 动画 几乎 都 用 Flash 来 制作 。 一 般 浏览 器 中 都 内 嵌 插 件 Adobe 
Flash Player 以 支持 Flash 动画 的 播放 。 

(4) 音频 

音频 的 适当 使 用 能 极 好 地 吸引 浏览 者 ， 烘 托 网 页 所 表现 内 容 的 氛围 。 但 添加 音乐 后 ， 网 页 的 加 
载 速度 会 受到 影响 。 另 外 ， 不 同 的 浏览 器 对 于 音频 文件 的 处 理 方法 是 不 同 的 ， 彼 此 之 间 很 可 能 不 兼 
容 。 因 此 ， 在 添加 音乐 时 需要 考虑 声音 文件 的 大 小 、 品 质 和 在 不 同 浏览 器 中 的 差异 ， 适 时 适度 地 
添加 。 
用 于 网 络 的 声音 文件 格式 非常 多 ， 常 用 的 是 MIDI、WAV、MP3、RM 和 AIF 等 。 很 多 浏览 器 
不 需要 插件 也 可 以 支持 MIDI、WAV、MP3 格式 的 声音 文件 ,而 RM 和 AIF 格式 的 声音 文件 则 可 能 
需要 专门 的 浏览 器 插件 才能 播放 。 

(5) 视频 

视频 可 以 给 访问 者 带 来 强烈 的 视觉 冲击 力 ， 让 网 页 内 容 更 加 丰富 。 网 络 上 的 许多 插件 也 使 得 向 
网 页 中 插入 视频 的 操作 变 得 非常 简单 。 网 页 中 应 用 的 视频 文件 格式 越 来 越 多 , 常见 的 有 RM、WMV、 
ASF、MPEG、AVI、RMVB 和 DivX 等 。 

(6) 超 链接 

超 链接 是 网 页 的 主要 特色 ， 指 从 一 个 位 置 指向 另 一 个 目的 位 置 的 连接 关系 。 超 链接 由 链接 载体 
和 链接 目标 两 部 分 组 成 。 最 常见 的 链接 载体 是 文本 或 图 片 ， 链 接 目标 则 可 以 是 任意 网 络 资源 ， 既 可 
以 是 另 一 个 网 页 ， 也 可 以 是 网 页 上 的 某 个 位 置 ， 还 可 以 是 图 片 、 电 子 邮件 地 址 、 文 件 甚至 是 应 用 
程序 。 


2. 网 页 的 基本 布局 元 素 


从 布局 设计 的 角度 讲 ， 网 页 一 般 由 标题 、 页 眉 、 主 内 容 区 和 页 脚 部 分 构成 。 页 眉 部 分 通常 包括 
网 站 的 Logo 和 导航 栏 ， 如 图 1-8 所 示 。 

(D 标题 

标题 是 对 网 页 内 容 的 高 度 概括 ， 便 于 搜索 引擎 搜索 ， 预 览 时 通常 出 现在 浏览 器 的 标题 栏 以 及 状 
态 栏 中 。 

(2) 页 眉 

页 眉 是 指 页 面 上 端的 部 分 ， 通 常 是 网 站 访问 者 在 网 页 中 看 到 的 第 一 个 元 素 ， 是 网 站 设计 中 非常 
重要 的 部 分 。 因 关注 度 较 高 ， 网 页 设计 者 常常 依靠 独特 的 设计 手法 ， 措 配 上 创意 优秀 的 图 片 ， 让 网 
页 突破 很 多 空间 界限 ， 给 人 留 下 深刻 的 印象 。 
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图 1-8 网 页 的 基本 布局 元 素 


大 多 数 网 站 制作 者 在 页 眉 部 分 设置 站 点 名 称 图 片 或 标志 、 网 站 宗旨 、 展 示 宣传 网 站 的 广告 条 和 
动画 、 链 接 网 页 的 导航 栏 ， 以 及 跳 转 网 页 的 按钮 等 ， 有 的 则 设计 成 广告 位 出 租 。 当 然 ， 页 眉 也 并 非 
所 有 网 页 都 有 ， 一 些 特殊 的 网 页 就 没有 明确 划分 出 页 眉 。 

@ Logo 

Logo 是 徽标 或 商标 的 英文 缩写 ,起 到 对 徽标 拥有 公司 的 识别 和 推广 作用 。 网 络 中 的 徽标 主要 是 
各 个 网 站 用 来 与 其 他 网 站 链接 的 图 形 标志 ， 代 表 网 站 或 网 站 的 某 个 版 块 。Logo 在 网 站 中 的 作用 主要 
体现 在 树立 形象 、 传 递 信息 以 及 品牌 拓展 三 个 方面 。 

Logo 的 设计 需要 从 多 方面 分 析 ， 涉 及 图 形 、 文 字 、 颜 色 和 排版 等 各 个 方面 的 内 容 。 通 常设 计 
Logo 时 主要 从 构成 (英文 名 称 、 网 址 、 标 志 图 形 和 主题 描述 )、 颜 色 、 形 体 (企业 品牌 标识 和 名 称 )、 
文字 的 字体 以 及 文字 的 抽象 五 个 方面 考虑 。 图 1-9 是 几 个 知名 网 站 的 Logo 示例 。 
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1-9 ”网 站 Logo 示例 


e 导航 栏 

导航 栏 是 网 站 内 多 个 栏目 的 超 链接 组 合 ， 在 网 页 中 起 着 很 重要 的 作用 。 它 不 仅 是 整个 网 站 的 方 
向 标 ， 而 且 还 能 体现 整个 网 站 的 内 容 ， 如 同 书 的 目录 一 样 。 导 航 栏 是 网 页 设计 中 不 可 缺少 的 部 分 ， 
利用 导航 栏 ， 浏 览 者 就 可 以 快速 找到 他 们 想 要 浏览 的 页 面 。 
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导航 栏 通常 位 于 网 页 的 项 部 或 左 侧 。 合 理 地 使 用 导航 栏 ， 可 以 使 网 页 层次 分 明 ， 但 导航 栏 不 宜 
过 多 ， 否 则 留 给 内 容 的 空间 就 可 能 不 够 (尤其 是 那些 提供 横幅 广告 的 网 站 )。 可 用 图 像 、 文 本 或 Flash 
动画 来 创建 导航 栏 。 文 本 的 加 载 速 度 更 快 、 更 容易 生成 ， 使 用 CSS 样式 可 为 文本 导航 栏 指定 “ 悬 停 
即 改变 颜色 ”等 效果 。 图 像 导 航 栏 则 显得 更 美观 ， 因 为 当 鼠 标 指针 悬 停 在 上 方 时 ， 图 像 更 容易 更 改 ， 
从 而 为 用 户 提供 视觉 线索 。 

(3) 主 内 容 区 

主 内 容 区 放置 网 页 的 主体 元 素 ， 往 往 由 文字 、 图 像 、 下 一 级 内 容 的 超 链 接 等 构成 ， 有 些 网 页 还 
会 加 入 音频 、 视 频 等 多 媒体 元 素 。 

在 设计 主 内 容 区 时 ,可 以 使 用 DIV 等 布局 元 素 合理 地 把 网 页 分 割 成 不 同 版 块 : 文字 和 图 片 巧 妙 
配合 、 文 字 和 背景 和 谐 对 比 ; 还 要 符合 用 户 的 阅读 习惯 ， 将 重要 的 内 容 排 在 左上 方 。 

(4) 页 肢 

页 脚 位 于 网 页 的 最 底部 ， 和 页 眉 相 呼应 。 页 脚 部 分 通常 用 来 介绍 网 站 所 有 者 的 具体 信息 ， 如 名 
称 、 地 址 、 联 系 方式 、ICP 备案 、 网 站 版 权 制作 者 信息 等 ， 其 中 一 些 内 容 也 可 能 被 做 成 标题 式 超 链 
接 ， 引 导 用 户 进 一 步 了 解 详细 内 容 。 


1.4.2 ”网 页 设计 常用 技术 


在 Web 标准 中 ， 网 页 主要 由 三 部 分 组 成 :结构 (Stmcture)、 表 现 (Presentation) 和 行为 (Behavior)。 
对 应 的 标准 也 分 为 三 方面 : 结构 化 标准 语言 ， 主 要 包括 HTML、XHTML 和 XML; 表现 标准 语言 ， 
主要 包括 CSS; 行为 标准 ， 主 要 包括 ECMAScript( 网 页 脚本 语言 规范 ) 等 。 

下 面 介绍 网 页 标记 语言 HTML、 设 计 网 页 样式 所 使 用 的 技术 CSS、 最 常用 的 脚本 语言 JavaScript， 
以 及 动态 网 页 编程 技术 ASP、JSP 和 PHP 等 。 


1. 网 页 标记 语言 HTML 


HTML 是 用 于 创建 网 页 和 设计 其 他 可 在 网 页 浏览 器 中 看 到 的 信息 的 一 种 标记 语言 ， 以 纯 文字 格 
式 为 基础 。 可 以 使 用 任何 文字 编辑 器 或 所 见 即 所 得 的 HTML 编辑 器 来 编辑 HTML 文件 。HTML 被 
用 来 结构 化 信息 一 一 例如 标题 、 段 落 、 列 表 和 图 像 等 ， 主 要 负责 网 页 的 “内 容 ” 部 分 。 

如 果 想 要 专业 地 学 习 网 页 的 设计 和 编辑 , 必须 具备 一 定 的 HTML 知识 .虽然 有 类 似 Dreamweaver 
这 样 的 网 页 编辑 软件 , 并 不 要 求 使 用 者 掌握 HIML, 但 网 页 的 本 质 是 由 HIML 构成 的 ,掌握 好 HIML 
是 精通 网 页 设计 和 制作 的 最 根本 要 求 。 


2. 网 页 表现 技术 CSS 


CSS 是 Cascading Style Sheet 的 缩写 ， 中 文 译 为 “ 层 倒 样式 表 ”， 简 称 “ 样 式 表 ”。W3CCWorld 
Wide Web Consortium， 万 维 网 联盟 ) 创 建 CSS 标准 的 目的 是 以 CSS 取代 HIML 表格 式 布 局 、 帧 和 
其 他 表现 型 语言 ,用 来 定义 网 页 的 外 观 样式 , 特别 是 进行 网 页 的 排版 布局 。 HTML 和 CSS 分 别 实现 
了 网 页 内 容 和 样式 的 设计 ， 实 现 了 结构 和 外 观 的 分 离 ， 使 站 点 的 访问 及 维护 更 加 容易 。 

如 今 网 页 排版 愈 发 复杂 ， 布 局 样式 都 需要 通过 CSS 来 实现 。 采 用 CSS 技术 可 以 方便 有 效 地 对 
页 面 布局 ， 更 加 精确 地 控制 网 页 的 字体 、 颜 色 、 背 景 和 其 他 效果 。 内 容 相同 的 网 页 ， 只 需要 对 CSS 
样式 进行 一 些 改变 ， 就 可 以 实现 不 同 的 页 面 外 观 和 格式 。 学 好 CSS 技术 是 精通 网 页 设计 和 制作 的 基 
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本 要 求 。 
3. 网 页 脚本 语言 


脚本 语言 由 ASCII 码 构 成 ， 是 一 种 不 必 事 先 编译 ， 只 要 利用 适当 的 解释 器 就 可 以 执行 的 简单 程 
序 。 在 网 页 中 使 用 脚本 语言 ， 可 以 丰富 网 页 的 表现 力 ， 是 网 页 设计 中 很 重要 的 一 种 技术 。 目 前 常用 
的 脚本 语言 有 JavaScript、VBScript， 其 中 JavaScript 是 众多 网 页 开发 者 首选 的 脚本 语言 。 

JavaScript 是 一 种 属于 网 络 的 脚本 语言 ， 已 经 被 广泛 用 于 Web 应 用 开发 ， 常 用 来 为 网 页 添加 各 
式 各 样 的 动态 功能 ， 为 用 户 提供 更 流畅 美观 的 浏览 效果 。 通 常 JavaScript 代码 可 以 直接 嵌入 HIML 
文件 中 ， 随 网 页 一 起 传送 到 客户 端的 浏览 器 ， 然 后 通过 浏览 器 解释 执行 。 


4. 动态 网 页 编程 技术 


网 页 的 发 展 绝 不 满足 于 仅 供用 户 单纯 地 浏览 ， 更 应 该 着 重 于 用 户 的 交互 操作 和 对 网 站 内 容 的 便 
捷 管 理 , 这 些 都 需要 通过 动态 网 页 编程 技术 来 实现 。 目 前 常用 的 动态 网 页 编程 技术 有 JSP、ASPNET 
和 了 PHP 等 。 

JSP 是 Java Sever Pages 的 缩写 ， 是 基于 Java 的 动态 网 页 技术 标准 ， 用 于 创建 可 支持 跨 平 台 及 
Web 服务 器 的 动态 网 页 。 从 构成 情况 看 ，JSP 页 面 代码 一 般 由 普通 的 HTML 语句 和 特殊 的 基于 Java 
语言 的 嵌入 标记 组 成 ， 所 以 它 具 有 Web 和 Java 功能 的 双重 特性 。 

ASP 是 Active Server Pages 的 缩写 ， 是 微软 公司 推出 的 Web 服务 器 端 脚本 开发 环境 。ASPNET 
是 ASP 技术 的 升级 换代 版 ,是 建立 在 公共 F 库 之 上 的 编程 框架 ， 可 用 于 在 服务 器 上 生成 功能 
强大 的 Web 应 用 程序 。ASP.NET 开发 的 首选 语言 是 C# 及 VB.NET， 同 时 也 支持 多 种 语言 的 开发 。 

PHP 原来 是 Personal Home Pages 的 缩写 ， 现 已 正式 更 改 为 Hypertext Preprocessor 的 缩写 。PHP 
是 一 种 HTML 内 谋 式 语言 ， 也 是 一 种 在 服务 器 端 执行 的 嵌入 HIML 文档 的 脚本 语言 。PHP 语言 比 
较 简 单 ， 属 于 轻 量 级 的 高 级 语言 ， 风 格 类 似 于 C 语言 ， 被 广泛 地 运用 于 互联 网 中 。 


1.4.3 网 页 设计 常用 工具 


HTML 文件 的 编写 可 以 使 用 任何 文本 编辑 器 ， 如 记事 本 、 写 字 板 、Word 等 ， 不 过 在 保存 时 都 
必须 保存 为 .html 或 htm 格式 .为 了 使 设计 网 页 更 加 简单 \ 方 便 , 有 些 公 司 和 人 员 设计 了 专业 的 HIML 
编辑 工具 , 这 些 工 具 绝 大 多 数 可 以 分 为 两 类 : 一 类 是 基于 文本 的 编辑 器 ， 另 一 类 是 所 见 即 所 得 编辑 器 。 


1. 基于 文本 的 编辑 器 


基于 文本 的 编辑 器 要 求 使 用 者 掌握 HTML 代码 ， 可 以 对 其 进行 定制 ， 从 而 提高 编码 速度 ， 通 常 
复杂 的 机 制 用 于 检查 编码 中 的 错误 。 这 样 的 编辑 器 非常 多 ， 读 者 可 以 多 下 载 几 个 免费 版 本 并 进行 简 
单 试 用 。 

(1) Windows 自 带 的 记事 本 

基于 文本 的 编辑 器 ， 最 简单 的 要 数 Windows 自 带 的 记事 本 ， 虽 然 它 在 严格 意义 上 并 不 能 被 称 为 
HIML 编辑 器 ， 但 它 简 单 易 得 ， 可 以 编辑 HIML、CSS、JavaScript 等 ， 在 学 习 HIML 之 初 是 非常 
好 的 选择 。 缺 点 是 记事 本 只 是 基本 的 文字 编辑 软件 ， 没 有 代码 提示 、 检 查 等 功能 。 

(2) Notepad++ 

Notepad++ 是 一 套 自 由 软件 中 的 纯 文 本 编辑 器 ， 功 能 比 Windows 自 带 的 记事 本 (Notepad) 强 大 ， 
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除了 可 以 用 来 制作 一 般 的 纯 文字 的 帮助 文档 , 也 十 分 适合 用 作 扎 写 计算 机 程序 的 编辑 器 。 Notepad++ 
不 仅 有 语法 高 亮 显 示 功能 ， 也 有 语法 折 县 、 代 码 自动 补 全 等 功能 ， 并 且 支 持 宏 以 及 扩充 基本 功能 的 
外 挂 模块 。 图 1-10 是 使 用 Notepad++ 编 辑 网 页 的 示例 。 
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1-10 基于 文本 的 编辑 器 Notepad++ 
(3) Phase5 
Phase5 是 自从 1998 年 起 就 被 期 待 和 熟知 的 网 页 编辑 器 ， 支 持 大 多 数 语 言 的 格式 ， 例 如 HTML、 
PHP、JavaScript 和 VBScript 等 。 


2. 所 见 即 所 得 编辑 器 


所 见 即 所 得 编辑 器 不 要 求 使 用 者 了 解 HIML 知识 ， 除 HTML 编辑 功能 外 ， 提 供 图 形 化 的 “ 预 
览 ” 页 面 效 果 ， 人 允许 用 户 通 过 看 到 的 页 面 预期 效果 进行 简单 的 拖 放 布局 即 可 。 此 类 软件 中 最 著名 的 
当 属 Adobe Dreamweaver(DW)， 它 是 美国 Macromedia 公司 (后 被 Adobe 公司 收购 ) 开 发 的 集 网 页 制 
作 和 网 站 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 。DW 是 针对 专业 网 页 设计 师 特 别 开 发 的 视觉 化 网 页 
开发 工具 ， 利 用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 浏览 器 限制 的 充满 动感 的 网 页 。 
Dreamweaver 是 一 款 专业 的 网 页 制作 工具 ， 不 仅 拥 有 “所 见 即 所 得 ”的 可 视 化 编辑 环境 ， 还 提供 强 
大 的 HTML 代码 编写 功能 。 无 论 使 用 HIML 语言 ， 还 是 使 用 可 视 化 的 编辑 器 ，Dreamweaver 都 为 
我 们 提供 良好 的 工具 ， 丰 富 我 们 的 操作 。 

1-11 是 使 用 Dreamweaver 编辑 网 页 的 示例 。 


3. 如 何 选择 工具 


根据 前 面 的 介绍 ， 读 者 可 能 会 毫 无 疑问 地 爱 上 所 见 即 所 得 编辑 器 ， 因 为 它们 具备 预览 功能 ， 能 
进行 拖 放 式 编辑 ， 同 时 也 能 方便 快捷 地 进行 代码 编辑 ， 具 有 更 强 的 灵活 性 。 但 一 些 开 发 者 倾向 于 使 
用 基于 文本 的 编辑 器 来 完成 工作 ， 原 因 是 所 见 即 所 得 编辑 器 会 占用 更 多 的 系统 资源 ， 并 且 容 易 产生 
宛 余 代码 ， 使 得 一 些 不 必要 的 代码 重复 出 现 多 次 。 更 糟 料 的 是 ， 所 见 即 所 得 编辑 器 并 非 所 有 方式 都 
具有 相同 的 输出 效果 ， 往 往 会 “所 见 非 所 得 ”。 
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尊 让 录 活 自 如 地 翌 台 
能 = 而 这 凋 《 秋 
而 失信 


1-11 所 见 即 所 得 编辑 器 Dreamweaver 


综 上 所 述 ， 无 论 是 基于 文本 的 编辑 器 还 是 所 见 即 所 得 编辑 器 ， 都 具有 各 自 的 优 缺 点 。 本 书 涉及 
的 HIML 和 CSS 都 可 以 在 记事 本 或 Dreamweaver 中 进行 编辑 和 处 理 。 目 前 来 看 ，Dreamweaver 是 
今后 从 事 网 页 设计 与 制作 的 首选 工具 ， 但 在 学 习 的 过 程 中 ， 为 了 专注 于 代码 本 身 ， 建 议 在 开始 时 采 
用 Windows 自 带 的 记事 本 作为 网 页 编辑 工具 。 在 学 习 基础 知识 以 后 ， 可 以 使 用 Dreamweaver， 但 为 
了 更 好 地 掌握 代码 的 使 用 ， 建 议 只 使 用 Dreamweaver 的 代码 编辑 功能 。 


强 军 丁 丫 算 卖 皆 Web 顶层 


1.5.1 搭建 浏览 环境 


尽管 各 主流 浏览 器 都 对 HIMLS 提供 很 好 的 支持 ,但 毕竟 HIML5 是 一 种 全 新 的 HIML 标记 语 
言 ， 许 多 新 的 功能 必须 在 搭建 好 浏览 环境 后 才 可 以 正常 浏览 。 为 此 ， 我 们 在 正式 浏览 一 个 HTML5 
页 面 之 前 ， 必 须 先 搭建 支持 HIMLS 的 浏览 器 环境 ， 并 检查 浏览 器 是 否 支持 HIML5 标记 。 

目前 , Microsof 的 正 系列 GE9?) 浏 览 器 ， 以 及 Mozilla 的 Firefox 与 Google 的 Chrome 浏览 器 等 
都 可 以 很 好 地 支持 HTML5。 

本 书 中 所 有 的 实例 ， 主 要 应 用 的 浏览 器 为 Chrome， 要 浏览 相应 的 实例 页 面 效 果 ， 需 要 安装 最 新 
版 的 Chrome 浏览 器 。 


1.5.2 ”检测 浏览 环境 是 否 支持 


为 了 进一步 了 解 浏览 器 支持 HTML5 新 标记 的 情况 ， 可 以 在 引入 新 标记 前 ， 通 过 编写 JavaScript 
代码 来 检测 浏览 器 是 否 支持 该 标记 。 

浏览 器 在 加 载 Web 页 面 时 会 构造 一 个 文本 对 象 模型 (DOM), 然后 通过 该 文本 对 象 模型 来 表示 页 
面 中 的 各 个 HIML 元 素 ， 这 些 元 素 被 表示 为 不 同 的 DOM 对 象 。 全 部 的 DOM 对 象 都 共享 一 些 公共 


Lz 
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或 特殊 的 属性 ， 如 HIML5 的 某 些 特性 。 如 果 在 支持 该 属性 的 浏览 器 中 打开 页 面 ， 就 可 以 很 快 检测 


出 这 些 DOM 对 象 是 否 支 持 这 些 特性 。 
下 面 以 加 入 画布 (Canvas) 标 记 为 例 ， 简 单 地 说 明 检测 浏览 器 的 整个 过 程 。 在 HTML 页 面 中 


Ph 插入 


一 段 HIML5 的 画布 标记 ， 当 浏览 器 支持 该 标记 时 ， 将 出 现 一 个 逢 形 ;， 反之， 则 在 页 面 中 显示 提示 


“该 浏览 器 不 支持 HIMLS 的 画布 标记 ! ” 
例 1-3: 在 Dreamweaver 中 新 建 一 个 HTML 页 面 ， 保 存 为 index.html， 代 码 如 下 所 示 。 


<!DOCTYPE html> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 


<Canvas id="myCanvas"> 

该 浏览 器 不 支持 HTMLS 的 画布 标记 ! </Canvas> 
body> 

</html> 


在 IE8 浏览 器 中 执行 页 面 文件 index.html。 由 于 IE8 浏览 器 暂 不 支持 HTMLS5 的 画布 标记 ， 


因此 


将 显示 如 图 1-12 所 示 的 页 面 效果 。 但 是 在 Chrome 浏览 器 中 执行 后 ， 由 于 该 浏览 器 支持 HTMLS5 的 


画布 标记 ， 因 此 将 显示 如 图 1-13 所 示 的 页 面 效 果 。 


El 


9 EEC 四 
宛 必 本 突 | 若 GANh5+css3\hSW-3.html 
该 浏览 器 不 支持 HTMLS 的 画 市 标记 ! 


C |@ filey/WFyh5+css3/h5/1-3html 分 |: 


图 1-12 IE8 不 支持 HTMLS 的 画布 标记 1-13 ”Chrome 支持 HTMLS 的 画布 标记 


虽然 是 同一 个 页 面 ， 但 由 于 不 同 的 浏览 器 对 HTMLS5 标记 的 支持 情况 不 同 ， 所 显示 的 页 面 效果 


也 各 异 。 因 此 ， 在 编写 HIML5 新 标记 时 ， 有 必要 先 检测 浏览 器 是 否 支持 该 标记 。 
接 下 来 将 使 用 HIMLS 编写 一 个 简单 的 Web 页 面 ， 从 中 体会 HIMLS 的 代码 简洁 所 在 。 


1.5.3 ”使 用 HTML5 编写 一 个 简单 的 Web 页面 


现在 来 看 一 个 简单 的 Web 页 面 。 不 需要 任何 特殊 程序 来 编写 网 页 。 可 以 仅 使 用 文本 编辑 器 ， 例 
如 Windows 自 带 的 记事 本 或 者 Mac 中 的 TextEdit。 然 后 以 html 或 htm 为 文件 扩展 名 保存 文件 。 
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<html> 
<head> 
<title> 热 门 网 站 :Google</title> 
</head> 
<body> 
<h1> 关 于 Google</h1> 
<p>Google 以 其 搜索 引擎 而 闻名 ， 尽 管 
谷歌 现在 提供 了 许多 其 他 服务 。</p> 
<p>Google 的 使 命 是 组 织 世界 的 信息 ， 
使 其 普遍 可 用 和 有 用 。</p> 
<p> 其 创始 人 拉 里 佩 奇 和 谢 尔 盖 布 林 在 
斯 坦 福 大 学 创办 了 Google。</p> 
<body> 
</html> 


例子 中 有 几 组 代码 的 中 间 包 含 单词 或 字母 的 尖 括 号 , 例如 <html>、<head>、</tile> 以 及 </body>。 
这 些 尖 括号 以 及 它们 内 部 的 单词 被 称 为 “标签 ”(tag)， 它们 就 是 前 面 提 到 的 “标记 ”(markup)。 图 1-14 
展示 了 这 个 Web 页 面 在 Web 浏览 器 中 的 效果 。 


D NRGoogle x + 
GC ©Aile//G/HIMS+CSS.. 文 四 


关于 Google 


Google 以 其 搜索 引擎 而 闻名 ， 尽 管 谷歌 现在 提供 了 许多 
其 他 服务 。 

Google 的 使命 是 组 织 世界 的 信息 ， 使 其 普遍 可 用 和 有 
用 。 


其 创始 人 拉 里 佩 奇 和 谢 尔 盖 布 林 在 斯 坦 福 大 学 创办 了 
Google。 


图 1-14 一 个 简单 的 Web 页 面 


区 了 札 滩 少 绑 _ 


在 本 章 中 ， 我 们 讨论 了 Web 标准 、 最 重要 的 Web 设计 原则 、 语 义 标记 及 层次 分 离 的 重要 性 、 
现代 Web 浏览 器 的 前 景 、 接 受 不 确定 性 以 及 倡导 可 访问 性 ; 介绍 了 HIMLS 的 历史 和 起 源 、 设 计 原 
则 以 及 HIML5 要 解决 的 问题 ， 举 例 介绍 了 HTMLS5 的 页 面 特 征 。 我 们 还 介绍 了 网 页 的 基本 元 素 和 
网 页 设计 的 常用 技术 等 基础 知识 ， 并 编写 了 一 个 简单 的 Web 页面。 


铝 者 和 个 组 乡 


1. Web 标准 是 什么 ? 
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o Newmh D 


. 使 用 Web 标准 的 好 处 有 哪些 ? 

. 语义 化 标记 是 什么 ? 

. 简 述 Web 标准 层次 。 

. 网 页 制作 常用 技术 有 哪些 ， 分 别 有 什 么 作用 ? 


HTML5 的 设计 原则 有 哪些 ? 


. 简 述 HTML 及 CSS 技术 在 网 页 设计 中 的 作用 分 别 是 什么 ? 
. 简 述 结构 化 文档 的 含义 。 
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“ 超 文本 标记 语言 ”(HyperText Markup Language，HIML) 代 码 用 于 创建 Web 页 面 。 从 Web 诞 
生起 ， 至 今 出 现 过 5 个 版 本 的 HTML。HTMLS5 是 这 门 语言 的 最 新 版 本 。 本 章 将 介绍 HTMLS5 的 演 
化 过 程 及 其 与 XHTML 之 间 的 重要 区 别 。 


本 章 的 学 习 目 标 : 

e@ 了 解 HIML 与 XHTML 的 基础 知识 

了 解 网 页 设计 中 一 些 关键 术语 (如 “元 素 ”“ 特 性 ”“ 标 签 ”“ 标 记 ”) 的 含义 
掌握 如 何 将 HTML 或 XHTML 页 面 转换 成 HTML5 页 面 

了 解 HIML5 的 新 的 结构 化 元 素 


5 HTML 与 XHTML 基础 


标记 语言 在 我 们 的 日 常 计 算 中 无 处 不 在 。 在 文字 处 理 文档 中 ， 填 充 了 大 量 的 标记 指令 来 描述 其 
结构 与 外 观 。 在 传统 的 文字 处 理 文档 中 ， 用 于 描述 结构 与 外 观 的 标记 代码 常常 不 是 后 台 编 码 的 ， 然 
而 在 Web 文档 中 , 传统 的 HIML 和 XHTMLCXHTML 是 基于 HIML 的 扩展 标记 语言 (XML) 的 变 体 ) 
标记 代码 是 明显 可 见 的 。 这 些 前 端 标记 语言 能 够 将 Web 页 面 的 结构 与 外 观 传递 给 Web 浏览 器 。 


2.1.1 标签 与 元 素 

在 HTML 中 ,网 页 中 的 标记 指令 会 把 文档 结构 传递 至 浏览 器 。 例 如 ， 当 要 将 一 段 文本 突出 显示 
时 ， 就 应 当 使 用 如 下 形式 ， 将 这 些 文本 包含 在 标签 <em> 和 </em> 中 : 

<em>This is important text!</em> 

如 图 2-1 所 示 ， 当 Web 浏览 器 读 取 带 有 HTML 标记 的 文档 时 ， 就 会 根据 嵌入 文档 中 的 HIML 
元 素来 确定 在 屏幕 上 如 何 显示 该 文档 。 
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Welcome to the world of <em>HTML</em>! + 一 一 一 


Welcome to the world of HTML! M 


2-1 带 有 HTML 标记 的 文档 


因此 ，HTML 文档 其 实 就 是 一 个 文本 文件 ， 这 个 文本 文件 包含 要 发 布 的 信息 和 指示 浏览 器 如 何 
显示 这 些 信息 的 标记 指令 。 

标记 元 素 (element) 一 般 由 开始 标签 (如 <strong>) 和 结束 标签 (如 </strong>) 组 成 ， 结 束 标 签 由 用 和 斜 
线 “/” 打 头 的 标签 表示 。 对 于 标记 元 素 而 言 ， 结 束 标签 不 是 必要 的 。 由 开始 标签 与 结束 标签 组 成 的 
标签 对 把 要 描述 的 所 有 内 容 ( 包 括 文本 和 其 他 HIML 标记 ) 都 包含 进去 。 

注意 : 

元 素 (如 strong) 与 元 素 使 用 的 标签 (如 <strong> 和 </strong>) 是 不 同 的 。 然 而 ， 人 们 常用 “标签 ” 
取代 “元 素 ”。 尽 管 人 们 在 讨论 标记 语言 时 存在 用 词 不 准确 的 情况 ， 但 这 并 不 是 什么 大 问题 ， 因 为 
大 家 都 能 够 很 好 地 理解 其 中 的 意思 。 

在 传统 的 HIML( 注 意 不 是 XHTML) 中 ， 因 为 一 些 元 素 的 结束 标签 可 以 被 推断 出 来 ， 所 以 可 以 
省 略 不 写 。 例 如 ， 在 下 面 的 例子 中 ， 因 为 标签 <P> 不 能 作为 另 一 个 标签 <P> 的 结束 标签 ， 因 此 就 可 以 
推断 出 这 里 省 略 了 结束 标签 <P>。 

<P> This is a paragraph. 

<P> This is also a paragraph. 

虽然 这 种 依赖 于 推断 的 缩短 标记 表示 法 能 够 使 用 语法 规范 在 技术 上 自动 更 正 ， 但 是 并 不 提倡 这 
样 做 。 针 对 上 面 的 例子 ， 最 好 使 用 下 面 这 种 更 精确 的 标记 表示 方式 : 

<P> This is a paragraph.</P> 

<P> This is also a paragraph.</P> 

空 元 素 (empty element) 是 指 不 包含 任何 内 容 的 标记 元 素 。 它 们 不 需要 结束 标签 。 对 于 XHTML， 
空 元 素 要 使 用 自 闭 合 标识 的 方式 。 例 如 ， 在 插入 一 个 换行 符 时 ， 因 为 空 元 素 不 包含 任何 内 容 ， 所 以 
不 必 添 加 结束 标签 ， 只 需要 使 用 一 个 <br> 标 签 即 可 ， 如 下 所 示 : 

<br> 

然而 ， 对 于 XML 的 标记 变 体 ， 特 别 是 XHTML， 是 不 允许 没有 结束 标签 的 。 因 此 ， 需 要 添加 
一 个 结束 标签 ， 如 下 所 示 : 

<br></br> 

另 一 种 更 常用 的 方法 是 使 用 自 闭合 标识 的 方式 ， 如 下 所 示 : 


<br> 
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元 素 的 开始 标签 中 一 般 包含 用 于 修改 标签 含义 的 特性 (attribute)。 如 下 所 示 ， 在 HTML 中 ，<hr> 
标签 中 的 noshade 特性 表示 这 条 水 平 线 不 能 使 用 阴影 效果 。 

<hr noshade> 

然而 ， 在 XHTML 中 则 不 允许 这 样 做 。 因 为 XHTML 中 的 所 有 特性 都 必须 被 赋值 ， 所 以 上 面 的 
语句 应 修改 为 : 

<hr noshade="noshade" /> 

在 上 面 的 示例 中 ， 特 性 是 通过 等 号 来 赋值 的 ， 这 些 值 要 用 双 引 号 或 单 引号 包含 ， 如 下 所 示 

<img sre="dog.gif" alt="Angus-Black Scottish Terier" height="100" width="100"> 

上 面 使 用 标准 的 HTML 语法 对 <img> 标 签 的 4 个 特性 进行 赋值 ， 这 4 个 特性 对 如 何 使 用 图 像 提 
供 了 更 详细 的 信息 。 在 传统 的 HTML 中 ， 简 单 的 字母 数字 型 特性 值 可 以 不 使 用 引号 ， 如 下 所 示 : 

<p class-fancy> 

然而 , 无 论 标准 HTML 中 提供 什么 样 的 灵活 方式 ,都 应 尽量 对 特性 使 用 引号 。 这 样 做 不 但 有 利 
于 标记 的 一 致 性 ， 更 容易 升级 到 更 严格 的 标记 版 本 ， 而 且 有 利于 减少 由 于 不 一 致 而 造成 的 错误 。 

如 图 2-2 所 示 ， 用 语法 结构 图 概括 了 前 面 学 过 的 HTML 标记 语言 的 语法 。 

标签 名 称 ”特性 名 称 ” ”特性 值 


<hl class="primary">Example Heading</hl> 

开始 标签 受 影响 的 内 容 标签 

L HTML 元 素 | 
图 2-2 语法 结构 图 


2.1.2 ”特性 组 


正如 前 面 介绍 的 ， 特 性 位 于 元 素 的 开始 标签 中 ， 并 为 所 属 元 素 提供 额外 的 特性 信息 。 很 多 特性 
由 “名 称 ” 和 “ 值 ” 两 部 分 组 成 。 名 称 反映 该 特性 所 描述 元 素 的 某 方面 属性 ， 而 值 则 是 该 属性 的 值 。 
例如 ，lang 特性 描述 了 元 素 中 所 使 用 的 语言 (anguage)， 而 值 (比如 “EN-US”) 则 表明 该 元 素 中 使 用 
的 语言 为 美国 英语 (U.S. English)。 

有 些 特性 只 含有 一 个 名 称 ， 如 required 或 checked。 这 些 特性 被 称 作 “布尔 特性 ”。 称 某 件 事物 
为 “布尔 ”， 是 指 其 只 能 处 于 两 种 状态 之 一 : 真 或 假 。 对 于 HTML 特性 而 言 ， 在 一 个 标签 中 出 现 某 
个 布尔 特性 ， 则 代表 该 特性 的 值 为 真 。 因 此 ， 以 下 两 行 是 等 价 的 

<input type="text" required> 

<input type="text" required="true"> 

HTML 中 的 很 多 元 素 可 以 包含 你 在 本 节 中 遇 到 的 部 分 或 全 部 特性 。 起初 它们 中 的 一 部 分 可 能 听 
上 去 有 一 点 抽象 ， 但 在 看 过 它们 贯穿 本 书 的 用 法 之 后 ， 一 切 都 会 顺理成章 。 所 以 不 必 担 心 最 初 不 能 
完全 理解 它们 。 

在 本 节 中 ， 将 会 看 到 HTML 元 素 中 常见 的 三 组 特性 。 
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e@ ”核心 特性 ， 例 如 class、id、style 以 及 title 特性 。 
e@ 国际 化 特性 ， 例 如 dir 和 lang 特性 。 

e@ ”辅助 访问 特性 ， 例 如 accesskey 和 tabindex 特性 。 
注意 : 

核心 特性 与 国际 化 特性 被 一 起 称 为 “通用 特性 ”。 


1. 核心 特性 


可 以 在 多 数 HTML 元 素 中 使 用 的 4 个 核心 特性 是 : id、tile、class、style。 

(D id 特性 

可 以 使 用 id 特性 来 唯一 标识 页 面 中 的 任何 元 素 。 可 以 通过 唯一 标识 一 个 元 素 , 链接 到 文档 中 的 
该 特定 部 分 ， 或 者 用 来 指定 一 个 CSS 样式 或 一 段 JavaScript 代码 应 该 只 被 应 用 于 文档 中 的 该 元 素 。 

id 特性 的 使 用 语法 如 下 (此 处 的 “string” 是 为 该 特性 选 定 的 值 ): 

id="string”" 

例如 ， 可 以 使 用 id 特性 区 分 两 个 段落 元 素 ， 如 下 所 示 : 

<p id="accounts">This paragraph explains the role of the accounts department.</p> 

<p id="sales">This paragraph explains the role of the sales department.</p> 

以 下 是 i 特性 取 值 的 一 些 特殊 规则 : 

e 必须 以 字母 开头 (A-Z 或 a-z)。 之 后 可 接任 意 数 量 的 字母 、 数 字 (0-9)、 横 线 (-)、 下 划 线 (_)、 

分 号 (;) 以 及 句号 (.))。( 不 能 以 数字 、 横 线 、 下 划 线 、 分 号 或 句号 开头 ) 
。 在 文档 中 必须 保持 唯一 性 。 同 一 HTML 页 面 中 不 允许 存在 两 个 取 值 相同 的 id 特性 。 这 种 情 
况 下 应 该 由 class 特性 处 理 。 

(2) class 特性 

可 以 使 用 class 特性 指定 某 元 素 属 于 某 一 特定 “类 型 ”(class)。 例 如 ， 有 一 个 包含 了 很 多 段落 的 
文档 ， 其 中 一 部 分 段落 包含 对 关键 点 的 总 结 ， 这 种 情况 下 可 以 通过 给 相关 段落 加 上 值 为 summary 的 
class 特性 以 与 文档 中 的 其 他 段落 相 区 分 。 

< class="summary">Summary goes here</p> 

这 种 用 法 在 CSS 中 运用 非常 普遍 。class 特性 的 语法 如 下 : 

class="className" 

class 特性 的 取 值 还 可 以 是 以 空格 分 隔 的 class 名 称 列表 ， 例 如 : 

class="classNamel className2 className3" 

(3) title 特性 

title 特性 为 元 素 提供 可 供 参考 的 标题 。title 特性 的 语法 如 下 : 

title="string” 

title 特性 的 行为 取决 于 包含 它 的 元 素 。 不 过 它 经 常会 作为 提示 标签 或 在 元 素 载 入 时 显示 。 并 不 
是 每 一 个 “可 以 ”包含 title 特性 的 元 素 都 实际 上 需要 。 所 以 当 遇 到 一 个 特别 受益 于 使 用 该 特性 的 元 
素 时 ， 你 会 在 该 元 素 中 看 到 它 的 行为 。 
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(4) style 特性 

style 特性 可 以 在 元 素 内 部 指定 CSS 规则 。 下 面 给 出 一 个 如 何 使 用 它 的 例子 : 

<p style= fontfamily:arial; color-#Fc00f000:;">Some text.</p> 

不 过 ， 作 为 总 体 规则 ， 最 好 避免 使 用 这 个 特性 。 如 果 想 使 用 CSS 规则 控制 元 素 的 显示 方式 ， 最 
好 使 用 一 种 独立 的 样式 表 取 而 代 之 。 该 特性 仍然 常用 的 唯一 情况 是 当 它 由 JavaScript 进行 设置 时 。 


2. 国际 化 


Web 是 一 种 全 球 现象 。 因 此 ， 很 多 机 制 被 内 置 于 驱动 Web 的 工具 中 ， 以 允许 作者 们 使 用 不 同 
语言 创建 文档 。 这 一 过 程 被 称 为 “国际 化 ”(intemationalization)。 

有 两 个 常见 的 国际 化 特性 可 以 使 用 不 同 的 语言 及 字符 集 来 编写 网 页 : dir 和 lang。 

接 下 来 你 将 了 解 它 们 中 的 每 一 个 特性 ， 但 值得 注意 的 是 ， 即 使 在 目前 的 浏览 器 中 ， 对 于 这 些 特 
性 的 支持 也 不 尽 相同 。 因 此 ， 可 能 的 话 ， 应 该 指定 一 个 字符 集 ， 以 按照 所 需 方式 显示 文本 。 

(D dir 特性 

di 特性 允许 指定 浏览 器 中 文本 的 显示 方向 : 从 左 向 右 或 从 右 向 左 。 当 需要 为 整个 文档 或 文档 的 
大 部 分 指定 行文 方向 时 ， 应 该 在 <html> 元 素 而 非 <body> 元 素 中 使 用 该 特性 。 这 样 做 有 两 个 原因 : 该 
特性 在 <html> 中 拥有 更 好 的 浏览 器 支持 ， 并 且 可 以 对 页 面 标题 和 内 容 主体 都 起 到 作用 ;如果 和 希望 修 
改 文档 中 一 小 部 分 文本 的 行文 方向 ， 也 可 以 在 文档 主体 的 元 素 中 使 用 di 特性 。 

di 特性 有 两 个 可 能 的 取 值 ， 如 表 2-1 所 示 。 


表 2-1 dir 特 性 的 取 值 


从 左 向 右 ( 默 认 人 
从 右 向 左 (用 于 希 伯 来 文 或 阿拉 伯 文 等 从 右 向 左 朗读 的 语言 ) 


(2) lang 特性 

使 用 lang 特性 可 以 指定 文档 中 使 用 的 主要 语言 。 

lang 特性 的 设计 初衷 是 为 用 户 提供 基于 语言 的 显示 方式 。 然 而 ， 它 在 主流 浏览 器 中 的 效果 很 不 
明显 。 使 用 lang 特性 的 好 处 主要 体现 在 以 下 几 个 方面 : 搜索 引擎 (可 以 告知 用 户 编写 文档 所 用 的 语 
言 )、 屏幕 阅读 器 (可 能 需要 对 不 同 语言 使 用 不 同 发 音 ) 以 及 应 用 程序 ( 当 不 支持 该 语言 或 者 页 面 语言 与 
默认 语言 不 同时 ， 可 以 警告 用 户 )。 当 与 <html> 元 素 一 同 使 用 时 ， 该 特性 作用 于 整个 文档 ; 不 过 ， 也 
可 以 在 其 他 元 素 中 使 用 它 ， 这 种 情况 下 它 仅 会 作用 于 这 些 元 素 的 内 容 。 

lang 特性 的 取 值 是 ISO-639-1 的 标准 双 字符 语言 代码 。 如 果 想 指定 该 语言 的 某 种 方言 ， 可 以 在 
语言 代码 后 附 上 一 个 横 线 和 次 级 语言 代码 。 表 2-2 提供 了 一 些 例子 。 


表 2-2 lang 特性 的 取 值 


值 含义 
ar 阿拉 伯 语 
en 英语 
en-ts 美国 英语 
zh 中 文 
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2.1.3 HTML 和 XHTML 实例 


现在 通过 一 个 实例 来 看 看 如 何 应 用 前 面 学 过 的 基本 的 HTML 语法 。 

例 2-1: 首先 使 用 严格 的 HTML 4.01 编写 如 图 2-3 所 示 的 “你 好 HIML 4 世界 ”网 页 。 代 码 如 
下 所 示 : 

<!DOCTYPE HIML PUBLIC "-/W3C//DTD HTML 4.0U/EN" 

"http://www.w3.0rg/TR/html4/strict.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title> 你 好 HTML 4 世界 </tide> 

<!-- Simple hello world in HTML 4.01 strict example -> 

</head> 


<body> 
<h1> 欢 迎 来 到 HTML 世界 </h1> 

<hr> 

<p>HTML <em> 真 的 <,em> 不 是 那么 难 ! </p> 
<p> 很 快 你 就 会 &hearts; 使 用 HTML。</p> 
<p> 如 果 你 愿意 ， 可 以 在 这 里 放置 大 量 文字 。<p> 
</body> 

</html> 


D 人 FHTML 4 世界 A 
© | © file///F/h5+ess3/h5/2-1Lhtml 


欢迎 来 到 HTML 世 界 


HTML 塌 2Y 下 是 那么 难 ! 
很 快 你 就 会 * 使 用 HTML, 
如 果 你 愿意， 可 以 在 这 里 放置 大 是 文字 。 


图 2-3 “你 好 HIML4 世 界 ” 网 页 


如 果 要 把 上 面 的 实例 转变 为 HIML5 版 本 ， 只 需要 简单 修改 一 下 <! DOCTYPE> 行 即 可 。 当 然 ， 
为 保持 内 容 一 致 ， 还 要 对 注释 与 文本 信息 进行 相应 的 修改 。 


<!DOCTYPE html> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 你 好 HTMLS 世界 </tite> 

<!-- Simple hello world in HTMLS example -> 

</lhead> 

<body> 

<h1> 欢 迎 来 到 HTML5 世界 <hl> 

<h> 

<p>HTMLS5 <em> 真 的 </em> 不 是 那么 难 ! </p> 
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<p> 很 快 你 就 会 &hearts: 使 用 HIML5。</p> 
<p> 如 果 你 愿意 ， 可 以 在 这 里 放置 大 量 文字 。</p> 
<body> 

<html> 


XHTML 是 HIML 基于 XML 语法 规则 建立 的 标记 语言 ， 因 此 ， 上 面 的 实例 转变 为 XHTML 版 
本 后 不 会 有 什么 大 的 变化 ， 如 图 2-4 所 示 。 代 码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtml1-strict dtd"> 

<html xmins="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="ContentType" content="text/html; charset=utf-8" /> 

<title> 你 好 XHTML 世界 </title> 

<!-- Simple hello world ip XHTML 1.0 strict example 一 > 

</head> 

<body> 

<hl> 欢 迎 来 到 XHTML 世界 </h1> 

<hr 户 

<p>XHTML <em> 真 的 </em> 不 是 那么 难 ! </p> 

<p> 很 快 你 也 会 &hearts: 使 用 XHTML。</p> 

<p>XHTML 和 HTML 之 间 存 在 一 些 差异 ， 但 通过 一 些 精确 的 标记 ， 您 会 发 现 这 些 差异 很 容易 解决 。</p> 

<body> 

</html> 


欢迎 来 到 XHTML 世界 


XHTML 起 9y 下 是 那么 难 ! 
很 快 你 也 会 e 使 用 XHTML。 


XHTML 和 HTML 之 间 存 在 一 些 差异 ， 但 通过 一 些 精 确 的 标记 , 您 
会 发 现 这 些 差异 很 容易 解决 。 


图 2-4 “你 好 XHTML 世界 ”网 页 


在 上 面 的 例子 中 ， 在 (X)HTML 文档 中 使 用 的 最 常用 元 素 有 : 

e@ <!DOCTYPE> 语 句 一 -用 于 说 明文 档 使 用 的 HIML 或 XHTML 的 特定 版 本 。 例 如 ， 第 一 个 
例子 中 使 用 的 是 严格 的 HTML 4.01 规范 ， 第 二 个 例子 中 使 用 的 是 HTML5 的 简化 形式 ( 稍 后 
再 进行 解释 )， 第 三 个 例子 中 使 用 的 是 严格 的 XHTML 1.0 规范 。 

e@ <html>、<head>、<body> 标 签 对 一 用 于 描述 文档 的 基本 结构 。XHTML 与 其 他 标记 语言 
有 不 同 ， 它 要 求 必 须 在 <html> 标 签 中 添加 xmlns 特性 。 

e@ <meta> 标 签 一 用 于 说 明文 档 的 MIME 类 型 和 使 用 的 字符 集 。 需 要 注意 的 是 ， 在 上 面 的 
XHTML 例子 中 ，<meta> 标 签 末 尾 的 斜 杠 指示 它 是 一 个 空 元 素 。 

e ”<title> 和 </title> 标 签 对 一 一 用 于 表示 文档 的 标题 ， 标 题 会 出 现在 Web 浏览 器 的 标题 栏 中 。 

e <!~- -> 一 用 于 表示 注释 ， 以 便 页 面 制作 者 提供 参考 信息 。 

e <hl> 和 </hl> 标 签 对 一 -用 于 以 标题 的 形式 显示 包含 的 信息 ， 以 强调 内 容 的 重要 性 。 
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<hr> 标 签 一 -用 于 在 屏幕 上 插入 一 条 水 平 线 ， 在 XHTML 中 要 用 自 闭合 结束 标签 <hr 人 来 表 
示 。 

<p> 和 </p> 段 落 标 签 对 一 一 表示 包含 的 信息 是 文本 段落 。 

&hearts; 一 一 HTML 中 的 命名 实体 ， 用 于 在 文本 中 插入 特殊 符号 Y。 

<em> 和 </em> 标 签 对 一 用 于 在 浏览 器 中 以 斜体 的 方式 显示 所 包含 的 文本 ， 以 示 强 调 。 


认识 HTMLS 


本 节 首先 用 XHTML 1.0 标 记 一 个 页 面 ,然后 把 它 转换 成 HIML5 页 面 , 以 此 让 我 们 认识 HTML5， 
并 能 够 利用 它 所 提供 的 优势 。 虽 然 有 些 方面 属于 新 内 容 ， 但 许多 背景 知识 我 们 都 是 熟悉 的 。 


2.2.1 


用 XHTML 1.0 标记 页 面 


例 2-2: 选用 XHTML 1.0， 在 介绍 美国 太空 第 一 夫人 贝克 小 姐 的 网 页 示例 中 ， 尽 可 能 用 最 合适 
的 元 素 对 示例 内 容 进行 标记 。 为 节省 篇 幅 ， 用 省 略 号 蔡 代 部 分 内 容 。 除 了 使 用 以 前 的 语义 化 标记 之 
外 ， 还 用 id 和 class 提供 额外 的 含义 ， 如 图 2-5 所 示 。 

页 面 代码 如 下 : 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN" 


“http://www.w3.0rg/TR/xhtmll/DTD/xhtmll-strict.dtd"> 


<html xmins="http://www.w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title> 贝 克 小 姐 <ltitle> 


</head> 


<body> 
<div id="container"> 


<div id="header"> 
<hl> 原 始 空间 先锋 </h1> 
<h4> 美 国 的 无 名 英雄 </h4> 
<div> 
<div id="article"> 
<h2> 贝 克 小 姐 <h2> 
<h4> 太 空 第 一 夫人 </h4> 
<div id="introduction"> 


<div> 
<div class="section"> 
<h3> 贝 克 小 姐 的 历史 性 飞行 <h3> 
<p>Miss Baker and fellow female pioneer Ables historic flight .</p> 


<Jdiv> 
<div class="section"> 
<h3> 使 命 <h3> 
<p>Miss Bakers flight was another milestone in the history of space flight. ..</p> 
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</ldiv> 
<div class—"aside"> 
<h3> 美 国 太空 计划 </h3> 
<p>A technological and ideological competition between the United States and the Soviet Union. ..</p> 


<div> 
<div class="section"> 
<h3> 退 休 生活 </h3> 
<p>Miss Baker spent the latter part of her life at the US Space and Rocket Centre ..</p> 


</div> 
<p class="smallprint">Copyright 2010 &middot Christopher Murphy</p> 
<div> 
<div id="footer"> 
<p>The Space Pioneers Web site is an example site, designed to accompany The Web Evolved, published by Apress. 
Text: The Web Evolved; Design: Jonny Campbell </p> 
<p>HTML + CSS released under a Creative Commons Attribution 3.0 license.</p> 


<p>Photography &copy; iStockphoto</p> 
</div> 
</div> 
<body> 
</html> 
D ma x Br En 
CC © file///G/HTMLS+CSS3/h5/ch02/2-2html 有 女 @lIG 
美国 的 无 名 英雄 
贝克 小 姐 
太空 第 一 夫人 
Before humans were launched into space, many animals were propelled heavenwards... 
贝克 小 姐 的 历史 性 飞行 
Miss Baker and fellow female pioneer Able's historic flight... 


图 2-5 用 XHTML 1.0 标记 的 “贝克 小 姐 ” 页 面 


2.2.2 ”84.8% 的 标记 可 以 保留 


虽 不 能 保证 100%, 但 从 科学 上 讲 大 约 有 84.8% 的 标记 可 以 保留 ,这 一 数据 基本 是 准确 的 。 正 如 
前 面 提 到 的 ，HTMLS 的 设计 原则 包括 不 要 重新 发 明 、 铺 平 老路 以 及 倡导 进化 而 非 革命 。 

简 言 之 ,HIML5 提倡 沿 原 有 基础 向 前 发 展 。 因 此 ,在 着 手 从 事 HTMLS5 开发 时 ， 并 不 需要 重新 
学 习 所 有 东西 。 你 所 熟知 的 所 有 语义 化 元 素 仍 适用 。 有 些 新 元 素 可 供 我 们 使 用 ， 但 里 面 大 量 元 素 仍 
是 我 们 所 熟知 的 。 
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关于 <head> 


在 开始 创建 传统 的 “Hello World!” 页 面 之 前 ， 让 我 们 先 看 看 将 要 碰 到 的 一 些 修改 ,特别 是 在 向 
HTMLS 推进 时 要 在 <head> 中 进行 的 修改 。 在 开始 进入 <body> 标 记 的 实际 细节 之 前 ， 需 要 先 理解 这 
些 基础 。 

本 节 将 介绍 HIML5 中 新 的 DOCTYPE， 解 释 在 HTML5 中 如 何 声明 语言 ， 并 介绍 新 的 、 更 简 
单 的 meta charset 属性 。 

在 开始 这 一 旅程 之 前 , 让 我 们 先 看 看 已 有 的 内 容 , 前 面 对 “ 贝克 小 姐 ”页面 选用 的 是 XHTML 1.0， 
读者 的 <head> 可 能 有 所 不 同 。 此 刻 ，“ 贝 克 小 姐 ” 页 面 中 的 <head> 如 下 所 示 : 

<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN™ 

"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd"> 
<html xmins="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title> 贝 克 小 姐 <htitle> 

</head> 

现在 看 看 HTMLS5 中 的 表示 : 

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8" /> 
<title> 贝 克 小 姐 </title> 
</head> 


可 见 ， 代 码 明显 更 简单 了 。 


2.3.1 更 完美 的 DOCTYPE 


令 人 晴 惧 的 DOCTYPE， 以 前 很 少 有 人 能 记 住 它 。 之 前 ， 无 论 选 择 的 风格 是 XHTML1.0 还 
是 HTML 4.01( 或 其 他 可 用 模式 )，DOCTYPE 都 一 直 是 一 串 让 人 无 法 理解 的 字符 。 如 果 使 用 过 
XHTML 1.0 标记 ， 那 么 一 定 看 到 过 以 下 DOCTYPE: 
<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/ENY" 
"http://www.w3.0rg/TR/xhtmll/DTD/xhtml1-strict.dtd"> 
如 果 标 记 风 格 是 HTML 4.01， 那 么 会 更 熟悉 以 下 DOCTYPE: 
<!DOCTYPE HIML PUBLIC "-WW3CWDID HIML 40L/EN" 
"http:/www.w3.org/TRjhtml4/strictdtd"> 
无 须 让 DOCTYPE 如 此 复杂 且 难 以 记忆 。W3C 在 开始 创建 标记 规范 时 ， 或 许 对 DOCTYPE 的 
目的 有 宏伟 设计 ， 但 实际 上 它 的 作用 只 是 告诉 浏览 器 ， 以 标准 模式 而 不 是 怪异 模式 去 呈现 页 面 。 在 
编写 HTML5 规范 时 ，WHATWG 意识 到 了 这 一 点 ， 并 将 它 改 为 构成 有 效 DOCTYPE 的 最 短 字 符 
序列 : 


<!DOCTYPE html> 
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启用 新 的 HTML5 DOCTYPE， 这 15 个 字符 可 以 保证 触发 标准 模式 。 现 在 修改 前 面 示例 中 的 
DOCTYPE， 并 再 次 对 页 面 进行 验证 ， 它 会 工作 得 很 好 。 鉴 于 Google 在 其 搜索 页 面 中 已 经 使 用 了 
HTML5 的 DOCTYPE， 因 此 修改 页 面 中 的 DOCTYPE。 


2.3.2 在 HTML5 中 声明 语言 


现在 来 看 看 如 何在 HIML5 中 声明 语言 。 但 为 什么 总 是 要 声明 语言 呢 ? W3C 对 这 一 问题 的 回答 
如 下 : 

对 于 大 量 的 应 用 程序 而 言 ， 从 语言 敏感 的 搜索 到 运用 语言 专用 的 显示 属性 ， 指 定 内 容 的 语言 都 
是 有 用 的 。 在 某 些 情况 下 ， 用 于 语言 信息 的 潜在 应 用 程序 仍 须 进一步 实现 ， 而 在 另 一 些 情况 下 ， 如 
发 声 浏览 器 的 语言 检测 ， 指 定 内 容 的 语言 目前 还 是 必需 的 。 

对 内 容 添加 关于 语言 信息 的 标记 是 目前 可 以 而 且 应 该 做 的 事情 。 如 果 不 这 样 做 ， 便 可 能 很 难 利 
用 未 来 的 一 些 新 技术 。 

就 目前 而 言 , 为 应 用 程序 声明 一 种 默认 语言 是 重要 的 , 例如 对 可 访问 性 和 搜索 引擎 等 会 有 影响 。 
不 过 随 着 时 间 的 推移 ， 或 许 还 会 出 现 一 些 其 他 类 型 的 应 用 程序 。 

为 HTML 文档 指定 语言 最 容易 的 方式 是 对 HIML 页 面 的 根 元 素 添加 lang 属性 。HTML 页 面 的 
根 元 素 始终 是 <html>， 因 此 为 了 指定 语言 ， 可 以 采用 如 下 做 法 : 

<html lang="en"> 

在 这 个 示例 中 ，lang 属性 的 值 是 en， 意 指 该 文档 是 用 英语 写成 的 。 但 是 ， 如 果 文 档 中 含有 并 非 
用 lang 指定 的 语言 写成 的 元 素 , 怎么 办 呢 ? 没关系 , 语言 属性 lang 也 可 以 内 联 使 用 。 以 下 示例 包含 
一 个 内 联 的 <span> 元 素 ， 它 含有 一 个 值 为 全 的 lang 属性 ， 指 示 其 中 的 内 容 是 以 法 语 写 成 的 : 

<p>Miss Baker, on entering the capsule, declared to her fellow astronaut Able: 

<span> lang="fr">"Bon chance!"</span></p> 

其 他 语言 也 有 两 字母 的 基本 代码 , 例如 de( 德 语 )、 jt 意大利 语 )、 nl( 荷 兰 语 )、es( 西 班 牙 语 )、ar( 阿 
拉 伯 语 )、m( 俄 语 )、z 轧 (中文 )。 

还 可 以 在 语言 中 指定 方言 , 这 通常 是 以 语言 基本 代码 来 表示 的 , 例如 en 后 跟 一 个 连 字符 及 相应 
的 方言 。 以 下 示例 分 别 显示 了 美式 英语 和 英 式 英语 : 

en-US: 美式 英语 

en-GB: 英 式 英语 

要 是 希望 使 用 一 种 更 前 卫 的 语言 ， 含 有 基本 标签 x 的 语言 表示 是 一 种 实验 性 语言 ， 如 下 所 示 : 

<p lang="x-klingon">nuqgDaq 'oH puchpa"e </p> 

Klingon( 克 林 贡 语 ) 短 语 “nuqDaq 'oH puchpare'” 意 为 “洗手 间 在 哪里 ”。 

最 后 ， 要 是 希望 创建 自己 的 语言 代码 ， 也 是 完全 可 能 的 。Geoffey Snedders 为 他 的 个 人 网 站 使 
用 了 以 下 语言 代码 : 

<html lang="en-gb-x-sneddy"> 

Snedders 先生 的 lang 属性 可 以 翻译 成 如 下 含义 : 
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2.3.3 ”字符 编码 

让 我 们 回 到 前 面 的 “贝克 小 姐 ”页 面 ， 它 用 以 下 方式 指定 了 字符 编码 : 

<meta http-equiv="content-type" content="text/html: charset=UTF-8" /> 

在 HTMLS5 中 ， 指 定 页 面 的 字符 编码 简单 多 了 ， 如 下 所 示 : 

<meta charset="UTF-8" /> 

实际 上 并 不 需要 了 解 字 符 编码 的 细节 , 它 定义 了 一 套 可 用 于 文档 的 人 类 语言 字符 集 。 使 用 UTF-8 
是 最 安全 的 ， 这 是 一 套 几 乎 含有 所 有 语言 中 全 部 字符 的 通用 字符 集 。 


2.3.4 简单 易 记 
将 以 上 介绍 的 内 容 综合 在 一 起 ， 不 再 需要 复杂 的 模板 ， 以 下 代码 对 任何 人 来 说 都 十 分 易 记 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title> 贝 克 小 姐 </tide> 
</head> 


接 下 来 看 看 如 何在 实际 的 页 面 中 将 上 述 内 容 综合 在 一 起 ， 创 建 “Hello World! ”页面 。 
欧 〗】 从 HTML 与 XHTML 到 HTMLS 


为 了 展示 出 不 同 版 本 HIML 间 的 标记 差异 ， 并 且 转 换 成 HIML5( 进 化 而 非 革命 )， 下 面 展示 一 
系列 “Hello World!”Web 页 面 ， 以 说 明 除 其 他 事项 外 ，HIML5 还 提供 了 各 种 标记 风格 选择 。 通 过 
考查 感觉 最 舒适 的 标记 风格 ， 得 出 我 们 的 结论 :， 应 当 采 用 将 XHTML( 一 种 更 严格 、 更 易于 学 习 的 语 
法 ) 和 HIML5( 具 有 前 瞻 性 、 更 富有 语义 化 色彩 ) 最 好 的 方面 结合 在 一 起 的 标记 风格 。 


2.4.1 XHTML 1.0 风格 的 “Hello World!” 


第 一 个 例子 是 一 个 很 简单 的 “Hello World!” 页 面 ， 这 是 用 XHTML 1.0 模式 的 DOCTYPE 标记 
而 成 的 。 这 是 一 个 典型 的 页 面 ， 结 构 良 好 且 完 全 合法 。 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd"> 
<html xmins="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html: charset=UTF-8" /> 
<title>Hello World! XHTML 1 Strict</title> 
</head> 
<body> 
<p>Hello World!</p> 
<body> 
<html> 
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2.4.2 HTML 4.01 风格 的 “Hello World!” 


以 下 示例 与 上 一 示例 等 效 ， 但 使 用 的 是 HIML 4.01 模式 的 DOCTYPE 进行 标记 的 ， 并 使 用 了 
简单 得 多 的 <htm> 开 始 标签 (去 掉 了 上 述 XHTML 1.0 版 本 中 的 XML 命名 空间 声明 )。 
与 前 一 示例 一 样 ， 它 完全 合法 ， 也 没什么 惊奇 之 处 : 


<!DOCTYPE HIML PUBLIC "-WW3CWDTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict .dtd"> 


<html> 

<head> 
<meta http-equiv=content-type content="text/html:; charset=UTF-8"> 
<title>Hello World! HTML 4 Strict</title> 

</head> 

<body> 
<p>Hello World!</p> 

</body> 

</html> 


至 此 ， 一 切 都 是 熟悉 的 。 让 我 们 看 看 HTMLS5 示例 。 


2.4.3 HTML5“ 松 散 ” 风 格 的 “Hello World!” 


前 面 演示 的 XHTML1.0 和 HTML 4.01 页 面 没什么 惊奇 之 处 。 现 在 让 我 们 看 看 最 简单 、 最 小 形 
式 的 HIMLS 页 面 。 以 下 页 面 虽然 只 有 几 行 ， 但 却 是 100% 合 法 的 HTML5“Hello World!” 页 面 : 

<!DOCTYPE html> 

<meta charset=UTF-8> 
<title>Hello World!</title> 
<p>Hello World! 
没有 <html> 开 闭 标签 ， 也 没有 <head> 和 <body> 元 素 ， 属 性 值 没有 引号 。 这 是 因为 HTML5 继承 
了 HTML 4.01 的 许多 特征 ， 具 有 相 比 XHTML 1.0 宽松 得 多 的 语法 限制 。 

HTMLS5 开发 的 特点 在 于 采用 了 一 种 务实 的 办 法 ，WHATWG 人 允许 各 种 通用 的 语法 变异 ， 包 括 
XHTML 的 严格 语法 以 及 HTML 4.01 的 松散 语法 。 为 了 强调 这 一 点 并 明白 HIML5 是 如 何 演化 而 来 
的 ， 让 我 们 看 一 个 稍 作 简化 但 仍然 合法 的 HIML 4.01 页 面 。 

<!DOCTYPE HIML PUBLIC "-/W3C//DTD HTML 4.0//EN" 

"http;//www.w3.org/TR/html4/strict.dtd"> 
<meta http-equiv=content-type content="text/html: charset=UTF-8"> 
<title>Hello World! HTML 4.01 Strict</title> 
<p>Hello World! 

除了 元 长 的 DOCTYPE 以 及 较 长 的 meta charset 属性 之 外 ， 这 两 个 例子 是 等 同 的 。 两 者 都 没有 
<html> 开 闭 标签 以 及 <head> 和 <body> 元 素 。 

原因 很 简单 ， 为 了 向 后 兼容 ，HTMLS5 允许 Web 页 面 用 HTML 4.01 或 XHTML 1.0 语法 进行 标 
记 。 无 论 采用 哪 一 种 语法 ，HTMLS5 都 能 对 其 进行 包容 。 

如 果 一 直 使 用 XHTML， 便 会 习惯 使 用 小 写 的 标签 和 属性 名 、 关 闭 元 素 、 使 用 引号 ， 并 为 所 有 
属性 赋值 。 有 些 人 发 觉 这 些 规则 是 限制 ， 而 有 些 人 则 欣赏 带 给 标记 的 这 种 一 致 性 。 

总 之 , 可 以 任意 选择 语法 来 标记 HTML5 页 面 , 但 是 , 我 们 建议 采用 较为 严格 的 XHTML 语法 。 
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因为 规则 是 有 用 的 ， 它 们 能 够 协同 工作 ， 让 大 家 遵照 一 种 标准 化 语法 。 规 则 也 使 标记 易于 学 习 。 使 
用 严格 的 XHTML 语法 还 有 一 些 其 他 原因 。 例 如 ， 可 访问 性 的 最 佳 做 法 是 期 望 在 <html> 标 签 中 使 用 
lang 属性 来 指定 文档 的 语言 。 如 果 在 页 面 中 不 使 用 <html> 标 签 ， 这 就 不 可 能 实现 了 。 


2.4.4 HTML5“ 严 格 ” 风 格 的 页 面 


如 果 一 直 使 用 XHTML 的 严格 语法 和 规则 编写 标记 ， 便 会 习惯 于 小 写 元 素 、 属 性 值 加 引号 、 关 
闭 空 元 素 等 。 正 如 从 上 一 示例 中 看 到 的 ， 对 于 HIML5， 这 些 都 可 以 不 必 遵 循 ， 可 以 使 用 大 写 的 元 
素 ， 属 性 不 加 引号 也 行 。 

但 是 要 想 把 XHTML 的 习惯 带 入 HIML5， 会 怎么 样 呢 ? 我 们 可 以 选用 XHTML 语法 对 页 面 进 
行 标记 ， 从 而 得 到 两 者 都 有 的 好 处 。 请 看 以 下 示例 。 

<!DOCTYPEhtml> 

<html lang="en"> 

<head> 
<meta charset="UTF-8" /> 
<title>Hello World!</title> 


这 是 100% 合 法 的 。 该 页 面 结 合 了 HTML5 与 XHTML 严格 语法 所 带 来 的 好 处 。 简 言 之 ， 这 种 
XHTML 语法 风格 的 HTML5 页 面 是 最 好 的 ， 如 图 2-6 所 示 。 


DD XHTML 要 法 风 检 的 HTML5 x 二 


C © file///G/HTMLS+CSS.. 所 


Hello World! 


图 2-6 XHTML 语法 风格 的 HTML5 页 面 


了 李 让 HTMLS5 得 到 阵 浏 览 器 支持 


下 面 继续 了 解 所 能 采用 的 技术 ， 以 使 新 的 HIMLS 语义 化 元 素 能 够 在 各 种 浏览 器 ， 甚 至 老式 的 
正 6 中 生效 。 首 先 介绍 浏览 器 如 何 处 理 未 知 元 素 。 


2.5.1 浏览 器 如 何 处 理 未 知 元 素 


HTML 是 一 种 宽松 的 语言 。 在 很 多 情况 下 ， 大 多 数 浏览 器 都 会 温和 地 处 理 它们 不 认识 的 元 素 和 
属性 ， 把 这 些 元 素 处 理 成 匿名 的 内 联 元 素 ， 并 人 允许 设 定 它们 的 样式 。 

每 种 浏览 器 都 有 一 个 支持 元 素 的 列表 。 例 如 ，Firefox 的 列表 便 存储 在 一 个 名 为 
nsElementTable.cpp 的 文件 中 。 该 文件 的 作用 是 告诉 浏览 器 如 何 处 理 它 所 遇 到 的 元 素 ,告知 浏览 器 这 
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些 元 素 的 样式 如 何 ， 以 及 在 Document Object Model( 文 档 对 象 模型 ， DOMD 中 应 该 如 何 对 它们 进行 
处 理 。 
在 以 下 示例 中 ， 每 个 简单 页 面 都 使 用 了 新 的 <tme> 元 素 。 示 例 中 包括 一 个 用 于 这 一 新 元 素 的 样 
式 表 。 现 在 的 问题 是 ， 浏 览 器 会 如 何 设 置 这 个 <time> 元 素 的 样式 呢 ? 
<IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Styling Unknown Elements - 1</title> 
<style> 
time 
{ 
font-style: italic; 
中 
</style> 
</head> 
<body> 
<p>Miss Baker made her historic joumey on <time datetime="1959-05-28">May 28, 
1959</time>.</p> 
body> 
</html> 


首先 ， 大 多 数 现代 浏览 器 都 能 很 好 地 识别 <time> 元 素 ， 并 将 日 期 “May 28, 1959” 的 样式 设置 为 
斜体 。 然 而 ， 正 (包括 正 8) 不 能 识别 这 个 <time> 元 素 ， 结 果 导 致 这 一 文本 是 无 样式 的 。 
这 一 问题 有 一 种 解决 方案 : 可 以 用 一 小 段 JavaScript 为 正 明确 地 声明 这 一 元 素 。 该 技术 的 做 法 
是 创建 一 个 新 的 DOM 元 素 ， 与 目标 元 素 同 名 以 欺骗 正 ， 使 其 能 够 “看 到 ”这 一 新 元 素 及 其 所 运用 
的 样式 。 以 下 是 一 个 使 用 了 document.createElement 的 代码 行 ， 它 明确 地 在 DOM 中 创建 <time> 元 素 
的 一 个 实例 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Styling Unknown Elements - 2</title> 
<script>document.createElement('time’):</script> 
<style> 
time 
和 
font-style: italic: 
} 
</style> 
</head> 
<body> 
<p>Miss Baker made her historic joumey on <time datetime="1959-05-28">May 28、 
1959</time>.</p> 
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通过 这 一 简单 的 JavaScript 片段 , 可 以 使 正 能够 看 到 <time> 元 素 ， 并 允许 插入 斜体 样式 。 显然 ， 
这 只 能 解决 单个 元 素 (此 例 中 的 <time>) 的 问题 。 下 一 个 示例 演示 如 何 解决 HTML5 引入 的 所 有 新 元 素 
的 问题 。 其 中 包括 要 强制 正 识别 的 所 有 元 素 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Styling Unknown Elements - 3</title> 
<scrip> 
(function| {if(!/*@ce_on!@*/0)return;var e = "abbrarticle.aside.audio. 
meter.nav,output.progress,section,time.video".split(',).i=e.length; 
while(i~-) {document.createElement(e[iD}})O0 
</script> 
<style> 
time 
{ 
font-style: italic; 
} 
</style> 
</head> 
<body> 
<p>Miss Baker made her historic joumey on <time datetime="1959-05-28">May 28, 
1959</time>.</p> 
body> 
</html> 


2.5.2 shiv 


HTML5 Enabling Script( 通 俗称 谓 为 shiv) 是 一 种 解决 正 中 未 知 元 素 的 样式 设置 问题 的 更 简单 方 
案 。 以 下 示例 演示 了 这 一 方案 。 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Styling Unknown Elements - 4</title> 
<L--[ifltIE 9 
<script src="http:/htmlSshiv.googlecode.conysvVn/trunkyhtml5s js"></script> 
<![endif]--> 
<style> 
time 
{ 
font-style: italic: 
} 
</style> 
<head> 
<body> 
<p>Miss Baker made her historic joumey on <time datetime="1959-05-28">May 28, 
1959</time>.</p> 
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<Jbody> 
</html> 


通过 将 该 脚本 嵌入 到 条 件 注释 中 , 我 们 便 能 够 让 它 针 对 早 于 IE9 的 正版 本 QE9 对 HIML5 有 相 
当 好 的 支持 )。 这 使 得 不 需要 该 脚本 的 浏览 器 能 够 直接 将 其 视 为 HIML 注释 而 跳 过 。 结果 会 怎样 呢 ? 
不 需要 该 脚本 的 浏览 器 便 不 会 下 载 它 ， 免 去 了 一 个 HITP 请 求 。 

最 后 有 两 点 要 强调 ,首先 , shiv 需 要 放 在 <head> 元 素 中 , 以 使 正在 呈现 之 前 便 能 识别 这 些 HTML5 
新 元 素 。 其 次 ，shiv 依赖 于 启用 JavaScript。 如 果 大 部 分 浏览 者 以 禁用 JavaScript 的 方式 浏览 Web， 
那么 便 需 要 考虑 蔡 代 方案 ， 例 如 在 标记 中 使 用 HIMLS 语义 化 的 class 名 称 。 


2.5.3 IE 打印 保护 器 


链接 到 Google Code 的 shiv 除了 提供 最 新 版 shiv 之 外 ， 还 提供 一 种 称 为 正 打印 保护 器 的 功能 ， 
它 解决 了 正在 打印 HTMLS5 页 面 时 将 会 遇 到 的 一 个 问题 : 不 会 适当 呈现 打印 页 面 上 的 HIMLS 元 素 。 
正 打印 保护 器 的 工作 方式 是 : 在 打印 时 用 所 支持 的 后 备 元 素 (如 <div> 和 <span>) 临 时 蔡 换 HTML5 元 
素 ， 并 根据 现 有 样式 为 这 些 元 素 创建 一 个 特殊 的 样式 表 。 


2.5.4 ”声明 块 级 元 素 


正如 前 面 提 到 的 ， 在 进行 样式 设置 时 ， 浏 览 器 会 将 未 知 元 素 处 理 成 匿名 的 内 联 元 素 。HTML5 
引入 了 大 量 新 的 块 级 元 素 ， 如 果 这 些 元 素 未 包含 在 浏览 器 的 已 知 元 素 查 找 表 中 ， 那 么 它们 将 被 视 为 
内 联 元 素 。 因 此， 需要 添加 一 条 CSS 规则 ， 将 它们 声明 为 块 级 元 素 。 

<style> 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

display: block: 

</style> 

这 一 简单 规则 指示 浏览 器 将 这 些 新 的 HTMLS5 元 素 (<article>、<aside>、<details>、<figcaption>、 
<figure>、<footer>、<header>、<hgroup>、<menu>、<nav> 以 及 <section>) 视 为 块 级 元 素 ， 并 相应 地 
显示 它们 。 


HTMLS 样板 页 面 


下 面 将 前 面 所 涉及 的 全 部 内 容 综合 在 一 起 ， 形 成 一 个 简单 的 HIMLS 样板 页 面 ， 代 码 如 下 ， 效 
果 如 图 2-7 所 示 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>HTMLS 样板 页 面 </title> 
<!--[ifltIE SP 
<script sre="http://htmlsshiv.googlecode.comy/svn/trunk/html5js"> 
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<![endif]-—> 
<style> 
article aside. details, figcaption. figure. footer. header heroup. menu. nav. section 
{ 
display: block:; 
’ 
</style> 
</head> 
<body> 
<p> 在 此 处 插入 您 的 内 容 。</p> 
</body> 
</html> 


一 X 
D HTML5E#EFR 面 x 灵 


CGC gfieyV/GVHTML. 儿女 9 


在 此 处 插入 您 的 内 容 。 


图 2-7 HTMLS5 样板 页 面 


2.6.1 不 再 有 type 属性 


在 上 一 示例 中 发 现 缺 少 一 点 东西 : 在 声明 JavaScript 或 CSS 时 ， 已 不 再 需要 包含 type 属性 。 以 
前 是 需要 包含 ype 属性 的 ， 如 下 所 示 : 


<!-[ifltIE o> 

<script type="text/javascript” 
STc="http://bhtmlSshiv.googlecode.comy/svn/trunk/htmlsjs"> 
</script> 

<![endif]--> 

<style type="text/css"> 
article, aside, details, figcaption, figure, footer, header heroup. menu, nav, section 
{ 
display: block: 
} 

</style> 


type 属性 type="text/javascript" 和 type="text/ess" 已 不 再 需要 。 现 在 可 以 删 掉 它们 以 节约 几 字 节 ， 
如 下 所 示 : 
<!-[ifltIE 9]> 
<script -sre="http://html$shiv.googlecode.com/svn/trank/html$ js"></script> 
<![endif]--> 
<style> 
article, aside, details. figcaption. figure. footer, header, hgroup. menu nav. section 
{ 
display: block: 
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} 
</style> 
这 是 因为 在 样式 设置 和 脚本 语言 方面 只 有 CSS 和 JavaScript， 己 经 没有 其 他 语言 可 用 并 要 进行 
区 分 。 过 去 ， 在 某 些 场合 下 ， 需 要 用 VBScript 编制 脚本 ， 但 它 早已 过 时 。 


2.6.2 ”填充 材料 与 替换 


刚才 展示 的 HIMLS 样板 页 面 以 及 丰富 的 HIML5 和 CSS3 跨 浏览 器 支持 ， 为 用 户 带 来 了 令 人 
惊艳 的 现代 Web 体验 ， 但 在 许多 情况 下 ， 这 些 还 不 够 。 有 时 会 要 求 对 不 支持 HTML5 和 CSS3 新 特 
性 的 那些 老式 浏览 器 (如 正 6 一 下 8) 也 要 实现 支持 ， 而 有 时 会 希望 使 用 并 非 所 有 现代 浏览 器 都 能 支持 
的 尖端 特性 。 
这 些 问 题 有 一 些 处 理 办 法 ， 而 且 你 在 本 书 中 会 看 到 多 种 不 同 的 技术 用 以 解决 这 类 问题 。 这 些 技 
术 一 般 分 为 以 下 三 大 类 。 
e@ ”优雅 降级 ， 可 以 让 许多 Web 特性 在 现代 浏览 器 中 具有 很 好 的 观感 ， 而 对 老式 浏览 器 进行 降 
级 处 理 ， 以 使 它们 看 起 来 不 那么 美观 ， 但 仍然 是 可 访问 和 可 用 的 。 

@ 渐 近 式 增强 / 蔡 换 : 渐 近 式 增强 / 蔡 换 与 优雅 降级 相反 。 可 以 为 所 有 浏览 器 建立 最 基本 的 功能 ， 
然后 为 支持 高 级 特性 的 浏览 器 构建 一 些 增 强 的 样式 和 可 用 性 。 有 时 ， 这 只 是 在 建立 标记 和 
样式 的 过 程 中 便 可 完成 的 事情 ， 而 有 时 则 需要 一 些 额 外 的 辅助 。 


注意 : 

一 个 名 为 Modemizr 的 特性 检测 库 会 检测 浏览 器 是 否 支持 CSS3、HTMLS 的 各 种 特性 ， 并 能 够 
运用 相应 的 不 同样 式 和 脚本 . 例如， 如果 一 个 网 站 使 用 了 CSS 动画 界面 特性 , 那么 可 以 用 Modemizr 
检测 对 它 的 支持 ， 然 后 将 一 个 较 简单 的 样式 集运 用 于 不 支持 的 浏览 器 ， 使 它 仍然 能 够 呈现 可 访问 和 
可 用 的 内 容 。 

e@ 填充 材料 : 这 是 一 些 通常 内 置 在 JavaScript 中 的 程序 ， 可 以 将 一 些 对 Web 技术 的 支持 添加 

到 尚 不 支持 它 的 浏览 器 中 。CSS PIE 就 是 一 个 很 好 的 例子 ， 它 对 老 版 本 的 正 添加 对 渐变 效 
果 、 圆 角 以 及 其 他 一 些 CSS3 特性 的 支持 。 


多 4 HTMILS 页 面 验证 


本 节 介绍 如 何 对 新 型 的 HIMLS 页 面 进行 验证 。 
为 什么 要 验证 呢 ? 对 页 面 进行 验证 通常 是 找 出 问题 的 第 一 阶段 。 使 用 验证 器 有 助 于 找 出 简单 且 
易 忽视 的 错误 ， 并 了 解 标记 运行 的 更 多 情况 。 


2.7.1 HTML5 验证 器 


下 面 两 个 验证 器 是 非常 可 靠 且 可 用 的 。 

(1) W3C Markup Validator 

W3C Markup Validator 可 以 检查 HTML、XHTML、SMIL、MathML 等 格式 的 Web 文档 标记 
的 有 效 性 。 这 个 验证 器 是 W3C 标准 验证 服务 Unicom 的 一 部 分 。 要 对 HTML5 使 用 这 个 验证 器 ， 


和 ?> 
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需要 使 用 More Options 选项 以 及 选择 Document Type 为 HTML5(experimental)， 如 图 2-8 所 示 。 详 见 
https://validator.w3.org/#validate_by_uritwith options。 


1 WSC | Markup Validation Service 


Validate by URI Validate by File Upload Validate by Directinput 


Validate by URI 
Validate a document online- 


Address: 


More Options 


Character Encoding [dasctautomaticaly) "| onlyirmissing 

Document Type [Hs(eperimenta) | Bonyimissng 

® List Messages Sequentially © Group Error Messages by Type 

LU Show Source DClean up Markup with HTML-Tidy 

口 Show Outine D vahdate error pages 3 verbose Output 
Check 


图 2-8 W3C Markup Validator 
(2) Validatornu (XJHTMLS Validator 


下 面 是 另 一 个 HIMLS 验证 器 Validatornu COHIMLS Validator， 如 图 2-9 所 示 。 详 见 
https:/htmls.validatornu/。 


Validator.nu (X)HTML5 Validator (Living Validaton 
Validator Input 


Address 


目 Show Image Report 
] Show Source 
Das 


图 2-9 ”Validatornu COHTMLS Validator 
对 之 前 的 HIMLS 样板 页 面 进行 检查 ， 看 看 它 是 否 合法 ， 如 图 2-10 所 示 。 


验证 器 返回 的 结果 如 下 : The document is valid HTML5 一 ARIA + SVG 1.1 + MathML 2.0 (subject 


to the utter previewness of this service)， 表 示 “ 该 文档 是 HTML5 一 ARIA + SVG 1.1 + MathML 2.0 合 
法 的 (完全 符合 本 服务 预览 )”。 


QOHTMLS validation results 
Valcator nput 


Tee 


Show image Report 
Show Sourcs 


tb 
13 tplay: blade 
je 


15 stl 
16 heap 
17， 人 edpyr 
18。。 人 在 化 处 给 入 在 的 内 容 。cpy~ 
18. hod 
加 Witnl》 


Used the HTML pareer 


Tetal execution tine3 milfyeconds 


Abous ths Serdce » More opsions 


图 2-10 HTMLS 样板 页 面 合 法 ， 完 全 符合 服务 预览 


2.7.2 更 新 和 验证 “贝克 小 姐 ” 页 面 


更 新 本 章 开始 时 介绍 的 “贝克 小 姐 ” 页 面 , 采用 新 的 DOCTYPE, 并 用 前 面 介绍 的 内 容 对 <head> 
进行 修改 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<tite> 贝 克 小 姐 </title> 
<L-[ifltIE 9> 
<script src=http://htmlSshiv.googlecode.comy/svn/trmunkhtml5js"> 
/scrip> 
<![endif]--> 
<style> 
article. aside, details, figcaption, figure, footer. header, hgroup. menu, nav. section 
{ 
display: block 
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<divid="footer"> 
<p>The Space Pioneers Web site is an example site, designed to accompany The Web Evolved, published by Apress. 
Text The Web Evolved; Design: Jonny Campbell </p> <p>HTML + CSS released under a Creative Commons Attribution 3.0 
license.</p> 
<p>Photography &copy; iStockphoto</p> 
<div> 
</div> 
<Jbody> 
</html> 


在 W3C Markup Validator 验证 器 中 测试 该 页 面 ， 结 果 如 图 2-11 所 示 。 


This toolis an ongoe hecing, a its bahiavi erans subied to conge 
Shewing results for contents of text input sre 
Checker Inout 


Show aource -ouline -Image report [CE 


tl 状元 地 
[者 下 


article, psiee， deteils, Figcoction, figure, feeter，hescer，hercsp。 nene, rey, section 


4 


:Docks 
] 
sve 
Tea 
Uss tne Mossage hnng mon potow aahen cartcual messages. nd bsee a Courts orenor and warnings, 


Vossege herng 


Documont cneching compioted. No orrors or wamings to shom. 


组 ”iv tte) 

2% 人 he Space 了 logeer 

BO wom be Ye rsd pa 
Es 


si a 
ve esim: Joaay Caposll. Way AL 


et 


Used the HTML parser 
Tonal mecurion time 3 mnilseccnde 


About tis checker « Aeport an issue Version: 129.21 


图 2-11 更 新 后 的 “贝克 小 姐 ” 页 面 的 文档 标记 是 有 效 的 
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使 用 Validatornu COHTMLS Validator 验证 器 对 其 语法 进行 测试 ， 结 果 如 图 2-12 所 示 。 
简单 地 修改 “贝克 小 姐 ” 页 面 的 <head> 元 素 ， 同 时 不 改变 body 元 素 中 的 标记 ， 便 形成 了 一 个 
合法 的 HIMLS 页 面 ， 就 这 么 简单 。 


CQHTMLS validation results 
Validator Input 


Tet 下 


tttae? 风 况 | 姐 crrlaey 
-IE lt LE 9]> 
pt src="http://ntmlSshiy .gcoglecode. coa/svn/trunk/ntnl5.js"> 


ie asioe, gatalls, rigcaption, igure, footer, neacer, ngroup, menu, nav, section 
ji nan 
/syaey 
Show Image Report 
Show Sourco 
TV 


| me accument is vaid HTMLS + ARIA + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this sevice). | 


Source 
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St [endit]—>— 
Cstyle 

article, aside, dstalls, fleetior, figre, forer, header, hgrap, meu, nav, sectim™ 

12. [a 

13, play; block;~ 

14. 1 

15. xstylem 

16. Wheat 

17. tod 

19. (div i "contasner"). 

19. 《div id’header’)» 

20. 人 原始 空间 先锋 </bl)~ 

a21. 全 作 糯 国 的 无 各 区 妊 YM4> 

22， Waive 

23. ~ 

24 Civ ig"article")— 

25， = 

26. /div 

27， tiv ifoorer' > 

28. YThe Space Piomeers wed site Ls an ale site, designed to ~ 


29. acoompany The yeh Bvolved. published hy 各 ress Text: The Weh Bvolved' Desien: Jomy Canpbel1.<jpy 《DYHTIL + CSS 
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3 Yiwe 
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图 2-12 更 新 后 的 “贝克 小 姐 ” 页 面 得 到 完美 验证 


新 的 结构 化 元 素 


在 HTML 4.01 和 XHTML 1.0 中 ,可 选 的 标记 在 一 定 程度 上 是 有 限 的 .尽管 <div> 要 远 比 <table> 
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更 适合 于 布局 ， 但 它 仍 然 只 是 一 个 用 于 流 式 内 容 的 一 般 性 容器 。 可 以 使 用 class 和 id 来 添加 CSS 
样式 ， 使 用 名 称 描述 元 素 的 内 容 ， 以 及 给 元 素 添加 额外 的 特定 语义 。 然 而 ， 尽 管 <ul class="nav"> 
和 <div class="sidebar"> 可 以 工作 得 很 好 ， 但 添加 的 额外 语义 并 不 是 用 户 可 访问 的 ， 甚 至 不 是 浏览 
器 能 够 识别 的 。 

HIML5 中 的 变化 是 增加 了 新 的 结构 化 元 素 。 这 些 元 素 用 于 表示 页 面部 分 常用 的 特定 语义 ， 以 
代 蔡 以 前 用 class 和 id 表示 的 部 分 ， 只 不 过 现在 它们 具有 标准 化 的 媒体 独立 的 语义 。 这 些 新 的 结构 
化 元 素 是 : 

<section> <article> <header> <footer> <hgroup> <nav> <aside> 


2.8.1 块 级 元 素 与 行内 元 素 


<body> 中 的 每 个 元 素 都 属于 以 下 两 种 类 别 之 一 : 块 级 (block-level) 元 素 和 行内 (inline) 元 素 。 

块 级 元 素 在 屏幕 上 展现 时 , 就 好 像 在 它 的 首尾 都 有 一 个 换行 符 。 例如 , <p>、<hl>、<h2>、<h3>、 
<h4>、<h5>、<h6>、<ul>、<ol>、<d>、<pre>、<hr >、<blockquote> 以 及 <address> 元 素 ， 都 是 块 级 
元 素 。 它 们 都 在 其 新 行 开始 显示 内 容 ， 并 且 这 些 元 素 之 后 的 任何 内 容 同 样 也 会 男 起 一 行 。 

行内 元 素 则 可 以 出 现在 同一 行 句子 中 而 不 必 另 起 一 行 。<b>、<i>、<u>、<em>、<strong>、<sup>、 
<sub>、<small>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd> 以 及 <var> 元 素 ， 都 是 行内 元 素 。 

例如 ， 看 一 下 标题 和 段落 ， 两 个 元 素 都 从 新 行 开始 显示 内 容 ， 并 且 元 素 之 后 的 任何 内 容 同样 另 
起 一 行 显示 。 与 此 同时 ， 上 段落 中 的 行内 元 素 并 没有 另 起 一 行 放置 。 代 码 示例 如 下 : 

<hl>Block-Level Elements</h1> 

<p><strong>Block-level elements</strong> always start on a new line. The 
<code>&lt:hl ggt:</code> and <code>&ltp&gt<lcode> elements will not sit 
on the same line, whereas the inline elements flow with the rest of the 
text.</p> 


可 以 在 图 2-13 中 查看 效果 。 


[好 元 时 = 和 加 
| © @ mieWjGJHTMLs+cssa/nsjcnozranm  @ © : 
| 


| Block-Level Elements 

Block-level elements always start on a new line. The mi and <p> 
elements will not sit on the same line, whereas the inline elements flow 
with the rest of the text. 


= 


图 2-13 ” 块 级 元 素 与 行内 元 素 的 显示 效果 
从 严格 意义 上 说 , 行内 元 素 不 可 以 包含 块 级 元 素 , 并 且 只 能 位 于 块 级 元 素 内 , 因此 不 应 该 将 <b> 
元 素 放 到 块 级 元 素 之 外 。 同 时 ， 块 级 元 素 既 可 以 包含 其 他 块 级 元 素 ， 也 可 以 包含 行内 元 素 。 
2.8.2 ”结构 化 构建 块 <div>、<section> 和 <article> 


首先 比较 用 于 结构 化 页 面 的 3 个 易于 混淆 的 元 素 。 
e <div>: 这 是 一 种 常用 的 一 般 性 容器 ， 是 一 种 无 附加 语义 含义 的 流 式 内 容 元 素 。 
”<section>: 这 是 文档 或 应 用 程序 的 一 般 性 小 节 ( 也 可 以 理解 为 “ 节 ”“ 片 段 ”“ 部 分 ”等 )， 
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几乎 总 是 带 有 标题 (也 许 在 <header> 中 )， 有 时 也 带 有 <footer>。 它 是 一 种 大 段 的 相关 内 容 ， 如 
一 篇 文章 的 小 节 、 页 面 的 主要 部 分 (如 首页 的 新 闻 片 段 ) 或 Web 应 用 程序 的 选项 卡 式 界面 中 
的 选项 卡 页 面 等 。 

@ ”<article>: 这 是 文档 或 网 站 的 独立 小 节 。 意 即 ， 它 可 以 单独 存在 ， 并 且 在 其 他 地 方 遇 到 时 (如 
在 RSS 馈送 中 ) 仍 具有 完整 的 意义 。 例 子 有 ， 一 篇 博客 文章 、 一 个 论坛 帖子 或 一 个 评论 等 。 
与 <section> 一 样 ， 它 应 该 有 标题 ， 并 可 能 包含 标 头 (header) 和 /或 脚注 (footer)。 


1. <div>、<section> 和 <article> 的 区 别 


(1) <div> 元 素 

在 编写 POSH( 简 单 、 旧 式 、 语 义 化 的 HTML) 的 过 程 中 ， 我 们 应 当 使 用 最 适当 或 语义 最 准确 的 
元 素 。 虽然 <div> 具 有 一 般 性 流 式 容器 元 素 的 语义 , 但 它 不 具有 除 此 之 外 的 任何 语义 含义 ,而 且 是 在 
没有 更 合适 元 素 的 情况 下 才 使 用 的 (HTML 4.01 一 直 就 是 这 样 )。<div> 的 内 容 没 有 相互 关联 的 要 求 。 

(2) <section> 元 素 

HTMLS5 的 新 元 素 <section> 类 似 于 <div>， 也 是 一 种 一 般 性 容器 元 素 ， 但 它 确实 具有 一 些 附 加 的 
语义 含义 -一 它 所 包含 的 东西 是 一 组 逻辑 相关 的 内 容 。 

<section> 也 是 一 种 内 容 的 分 节 元 素 。 与 <article>、<nav>、<aside> 等 配合 使 用 ， 可 以 指示 文档 中 
的 小 节 。 

(3) <article> 元 素 

新 的 HTMLS5 元 素 <article> 是 一 种 特殊 的 <section>。 它 具有 更 特定 的 语义 含义 , 即 它 是 页 面 的 一 
个 独立 、 自 包含 部 分 。 在 使 用 <article> 的 地 方 可 以 使 用 <section>， 但 使 用 <article> 可 以 给 出 更 多 的 语 
义 含义 。 

2. 选用 哪 一 个 


<section> 表 示 “ 相 关内 容 ”， 而 <article> 则 意味 着 即使 是 在 页 面 的 上 下 文 之 外 (页 面 的 标 头 、 脚 
注 等 )， 这 也 是 “一 段 具有 完整 意义 的 相关 内 容 ”。 

容易 引起 混淆 的 是 ，<section> 可 以 用 于 一 个 页 面 的 多 个 部 分 ， 因 而 能 够 包含 多 个 <article>( 如 首 
页 的 “Recent Articles”( 最 新 文章 ) 部 分 )， 而 且 能 够 用 于 一 篇 文章 中 的 多 个 小 节 ( 在 一 篇 文章 中 )。 因 
此 ， 要 想 决 定 <article>、<section>、<div> 是 否 合适 ， 需 要 按 以 下 优先 顺序 选择 适当 的 选项 : 

(1) 被 封装 的 内 容 在 馈送 阅读 器 中 会 有 完整 意义 吗 ? 如 果 有 ， 选 用 <article>。 

(2) 被 封装 的 内 容 是 相关 的 ? 如 果 是 ， 选 用 <section>。 

(3) 如 果 没 有 语义 关系 ， 选 用 <div>。 

在 语义 化 的 HIML5 中 , 希望 在 适当 的 地 方 用 <section>、<article> 以 及 其 他 新 的 结构 化 元 素 代替 
简陋 的 <div>。 然 而 ， 不 必 担 心 在 相应 的 地 方 使 用 了 <div>， 因 为 它 仍然 是 合法 的 HIML5 标记 。 
<section> 和 <article> 的 使 用 方法 和 HTML 4.01 中 的 <div> 一 样 。 例 如 , 这 些 元 素 不 能 用 于 <blockquote> 
或 <address> 内 部 ， 而 且 要 避免 在 一 个 <article> 中 赃 套 另 一 个 <article>， 要 用 一 些 <section> 来 表示 
<article> 中 的 逻辑 部 分 。 一 些 Web 应 用 程序 的 <section> 和 <article> 不 需要 标题 ， 但 最 好 还 是 加 一 个 
标题 ， 哪 怕 后 面 再 通过 CSS 把 它 隐藏 起 来 。 
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3. 使 用 这 些 元 素 的 基本 结构 


以 下 是 两 个 示例 ， 它 们 展示 了 <section> 和 <article> 的 用 法 。 
一 篇 博客 文章 ， 以 下 是 要 处 理 的 结构 : 
e 博客 文章 
o 标题 
0 内 容 …… 
在 HTML 4.01 中 ， 可 将 这 篇 文章 封装 在 <div class="article"> 等 元 素 中 。 显 然 ， 在 HTMLS5 中 应 
该 用 <article> 代 蔡 。 


<article> 
<hl>Heading</hl> 
<Jarticle> 
一 篇 有 多 个 小 节 的 长 文章 ， 以 下 是 使 用 的 文章 结构 : 
@ 文章 
9 标题 
4 小 节 
和 小 节 标 题 
里 内 容 
4 小 节 
里 “小 节 标题 
里 ”内容 
4 小 节 
里 “小 节 标题 
里 “内容 
同样 , 这 篇 文章 在 HIML 4.01 中 通常 被 封装 在 <div> 中 , 而 各 小 节 只 会 由 <h1> 一 <h6> 元 素 标记 。 
在 HIML5 中 ， 这 篇 文章 应 该 被 封装 在 <article> 中 ， 而 <article> 的 各 个 子 小 节 应 当 明 确 地 由 封装 子 小 
节 内 容 的 <section> 元 素 指示 ; 或者， 如果 想 对 小 节 进行 编号 ， 可 以 用 有 序列 表 来 表示 。 
<article> 
<hl>Heading</h1l> 
<section> 
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</article> 
2.8.3 标题 : <header>、<footer>、<hgroup> 以 及 <h1> 一 <h6> 


接 下 来 ， 让 我 们 详细 看 看 <header>、<footer>、<hgroup> 以 及 <h1> 一 <h6> 元 素 。 

e@ <header>: 用 于 分 节 元 素 的 内 容 介绍 和 导航 。 一 般 包括 标题 (一 个 <hl> 一 <h6> 的 元 素 或 一 个 
<hgroup> 元 素 )， 但 也 可 以 含有 其 他 内 容 ， 如 <nav> 元 素 或 导航 链接 、 内 容 表格 、 搜 索 表 单 或 
相关 徽标 等 ， 不 过 不 能 包含 <footer> 或 另 一 个 <header>( 参 见 http://j.mp/html5-header)。 

e@ <footer>: 用 于 表现 内 容 的 附加 信息 ， 如 作者 、 相 关 文 档 的 链接 、 版 权 数据 、 返 回 到 页 首 的 
链接 等 ,而 且 通常 出 现在 内 容 的 底部 。 像 <header> 一 样 , 它 也 不 能 再 包含 <header> 或 <footer> 
元 素 。 

e@ <hgroup>: 这 是 <header> 的 一 种 特殊 形式 ， 只 能 包含 <hl> 一 <h6> 元 素 ， 用 于 对 带 有 副标题 
的 标题 进行 组 合 。 

e@ <hl1> 一 <h6>: 这 些 原 有 的 标题 元 素 已 经 被 沿用 下 来 , 而 且 基 本 上 没什么 改变 , 只 不 过 HITML5 
更 为 强调 对 它们 的 正确 使 用 (原则 上 不 跳 越 标题 级 别 )， 而 且 对 标题 级 别 增 加 了 有 趣 的 
HTMLS5 样式 。 


2.8.4 更 多 的 结构 化 元 素 : <nav>、<aside>、<figure> 以 及 <figcaption> 


下 面 介绍 另外 两 个 内 容 分 节 元 素 一 一 <nav> 和 <aside>， 还 会 涉及 <figure> 及 其 子 元 素 <figcaption>， 
并 将 它们 与 <aside> 进 行 比较 。 

e ”<nav>: 导航 链接 小 节 ， 这 些 链 接 要 么 链接 到 其 他 页 面 ， 要 么 链接 到 同一 页 面 的 其 他 小 节 ， 
如 用 于 长 文章 的 目录 。 通 常用 于 主导 航 块 ， 而 不 只 是 一 组 纯粹 的 链接 。 一 条 经 验 规则 是 ， 
最 好 为 它 添加 “ 跳 过 导航 ”链接 。 

@ <aside>: 页 面 中 的 一 个 小 节 ， 由 与 周边 内 容 略 微 相关 但 又 单独 分 开 的 内 容 组 成 。 在 打印 时 ， 
它 可 能 是 侧 边栏 、 醒 目的 引文 或 脚注 。 而 在 一 篇 博客 文章 中 ， 它 可 能 是 文章 的 相关 信息 、 
旁 注 的 附加 信息 或 评论 小 节 。 

e <figure>: 它 用 于 这 样 一 种 内 容 一 一 对 理解 至 关 重 要 , 但 可 以 在 文档 流 中 迁移 ( 移 到 不 同 的 地 
方 )， 却 不 影响 文档 的 含义 。 可 以 用 于 图 像 或 视频 ， 也 可 以 用 于 任何 其 他 内 容 ， 包 括 图 表 、 
代码 示例 或 其 他 媒体 。 使 用 可 选 (而 有 趣 ) 的 子 元 素 <figcaption> 可 以 提供 标签 。 

网 站 导航 已 经 在 使 用 <ul class="nav"> 或 其 他 类 似 的 方法 。<nav> 元 素 能 够 明确 地 标记 导航 链接 

组 。 它 具有 可 访问 性 所 能 带 来 的 好 处 ， 例 如 它 让 使 用 残障 技术 (如 屏幕 阅读 器 ) 的 用 户 能 够 跳 过 导航 
而 直接 进入 内 容 ， 或 是 直接 跳 到 导航 部 分 。 如 果 导 航 使 用 的 是 列表 ， 那 么 仍然 需要 <ul> 或 <ol> 元 素 ， 
但 是 也 可 以 包含 标题 或 其 他 相关 内 容 。 以 下 是 一 个 实用 的 <nav> 示 例 ， 它 带 有 标题 ， 可 以 通过 CSS 
来 隐藏 ， 如 图 2-14 所 示 。 
<nav> 
<h2 class="ally">Main navigation</h2> 
< 
<li><a href="">Home</a></li> 
<li><a href="/blog/">Weblog</a></li> 
<li><a href="/about/">About</a></li> 
<li><a href="/contact/">Contact</a></li> 
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D msss x 本 下 
C QieVWW/GYHTIML5+ 立国 日 
Main navigation 
。 Home 
。 Weblog 


» About 
。 Contact 


图 2-14 ”网 站 导航 


<aside> 应 当 是 对 主 内 容 的 补充 ， 是 一 些 有 点 相关 的 内 容 。 例 如 ， 让 放 在 <aside> 中 的 网 站 侧 边栏 
作为 <body> 的 子 元 素 就 很 好 , 但 整个 网 站 范围 的 信息 不 应 该 出 现在 作为 <article> 子 元 素 的 <aside> 中 。 
另外 ，<aside> 适 合 于 放置 广告 ， 只 要 与 父 分 节 元 素 有 关 即 可 。 以 下 是 一 个 <aside> 示 例 ， 它 在 文章 的 
边 空 处 提供 了 补充 信息 。 

<aside class="sidenote"> 

<p><em>Sectioning root</em> elements are <code>&ltblockquote&cgt</code>, <code>&ltbody&cgt</code>， 

<code>&ltdetails&cgt</code>, <code>&ltfieldset&gt</code>, <code>&ltfigure&gt</code>,and <code>&lttd&cgt</code></p> 

</aside> 

<p><code>&ltheader&gt<lcode> and <code>&ltfooter&cgt</code> apply to the cumrent sectioning content or 'sectioning root 


<figure> 的 内 容 是 必需 的 ， 但 位 置 是 可 变 的 。 一 个 小 节 中 要 用 CSS 进行 定位 的 任何 一 部 分 都 是 
很 好 的 运用 场景 。 通 常 ， 这 称 为 依 文字 而 定 ， 但 并 不 是 必需 的 ， 如 下 所 示 : 
<p>.… Here is an example ofusing <code>hgroup</code> for a subtitle.</p> 
<figure> 
<img sre="img/hgroup-subtitle.png" width="500" height="136" alt="hgroup example usage; an article heading with an 
altemative heading" /> 
</figure> 
也 可 以 用 <figcaption> 作 为 第 一 个 或 最 后 一 个 子 元 素 ， 为 <figure> 提 供 可 选 标 题 ， 如 下 所 示 : 
<figure> 
<figcaption>An article heading with an altemative heading</figcaption> 
<img src="img/hgroup-subtitle.png" width="500" height="136" alt="hgroup example usage: an article heading with an 


altemative heading" /> 
</figure> 
最 后 ，<figure> 可 以 包含 多 个 内 容 片 段 ， 如 下 所 示 : 
<figure> 


<pre><code>&ltrubyS&gtSltstrongSgtcromulent&lt/strong&gt ltTpSgt(Slt/PSgtESltrtScgtcrom-yiileantSlt' 
tgt:&ltrpergt:)&lt/rpégt:&lt/mbyé-gt:</code></pre> 
<img sre—"img/cromulent png" width—"570" height—"80" alt="Displaying miby text after the base text for an English dictionary"> 
<figcaption>Using mby text for a dictionary definition by displaying the miby text inline after the base text</figcaption> 
</figure> 
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2.8.5 ”将 一 个 简单 的 页 面 转换 成 HTML5 页 面 


例 2-3: 这 是 一 个 理想 化 的 文章 页 面 的 范例 结构 ， 它 采用 标准 的 布局 ， 包 括 页 头 ( 带 有 徽标 等 )、 


主导 航 、 主 内 容 ( 包 括 文章 、 侧 边栏 以 及 页 脚 )。 
以 下 是 该 页 面 的 大 纲 。 
e ”页 头 (网 站 名 称 、 微 标 、 搜 索 框 等 ) 
。 主导 航 
。 主 内 容 ( 封 装 器 ) 
和 文章 ( 主 栏目 ) 
0 文章 标题 
o 文章 元 数据 
0 文章 内 容 
o 文章 脚注 
昌 _ 侧 边栏 
o 侧 边 栏 标题 
o 侧 边栏 内 容 
@ 页 脚 
2-15 显示 了 这 个 页 面 布局 。 


图 2-15 文章 的 页 面 布局 
因此 ， 让 我 们 先 用 标准 的 POSHCXHTML 1.0 风格 ) 进 行 编写 。 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Strict/EN" 
"http://www.w3.org/TRJxhtmll/DTDAxhtmll-strictdtd"> 
<html lang="en" xml:lang="en"> 
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<!-- other page heading content -> 
<div> 
<ul id="nav"><li>Site navigation</li></ul> 
<div id="content"> 
<div id="main"> <!-- main content (the article) -> 
<hl>Articletitle<hl> 
<p class="meta">Article metadata</p> 
<p class="article-footer">Article footer</p> 
</div> 
<div id="sidebar’> <!— secondary content —> 
<h2>Sidebar tile</h2> 
<p>Sidebar content ..</p> 
<Jdiv> 
</div> 


</html> 
下 面 用 新 的 结构 化 元 素 将 它 转 换 成 HTMLS5 页 面 。 


<!-- HTML-style HTML5 一 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Article (HTMLS)</title> 
</head> 
<body> 
<header id="branding"><!-~ page header (not in section etc) —> 
<hl>Site name</hl> 
<!-- other page heading content —> 
</header> 
<nav> 
i>Main navigation</li></ut 
/nav> 
<div id="content"> <!~ wrapper for CSS styling and no title so not section --> 
<article> <!-- main content (the article) —> 
<header> 
<hl>Article title</h1l> 
<p>Article metadata</p> 
</header> 
<p>Article content...</p> 
<footer>Article footer</footer> 
</article> 
<aside id="sidebar"> <!-- secondary content for page (not related to article) -> 
<h3>Sidebar title</h3> <!-- Tef HTMLS-style heading element levels -> 
<p>Sidebar content</p> 
</aside> 
<div> 
<footer id="footer">Footer</footer> <!-- page footer —> 
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<Jbody> 


<html> 


<!-- XHTML-style HIMLS -> 
<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Article (HTMLS)</title> 
</head> 
<body> 
<header id="branding"> <!-- page header (not in section etc) -> 
<hl>Site name</h1l> 
<!-- other page heading content -> 
</header> 
<nav> 
</nav> 
<div id="content"> <!- wrapper for CSS styling and no title so not section --> 
<article> <!-- main content (the article) —> 
<header> 
<hl>Article title</h1l> 
<p>Article metadata</p> 
</header> 
<p>Article content...</p> 
<footer>Article footer</footer> 
</article> 
<aside id="sidebar"> <!-- secondary content for page (not related to article) --> 
<h3>Sidebar title</h3> <!-- ref: HTML5-style heading element levels --> 
<p>Sidebar content</p> 
/aside> 
</div> 
<footer id="footer">Footer</footer> <!-- page footer 一 > 
<body> 


</html> 


本 章 小 结 


至 此 ， 我 们 已 经 学 习 了 HIMLS 的 有 关 知 识 ， 并 了 解 了 XHTML 1.0、HTML 4.01、“ 松 散 的 ” 
HTML5 风格 、 更 为 严谨 的 XHTML 风格 以 及 HIMLS 风格 之 间 的 语法 


区 别 。 本 章 也 展示 了 新 的 


HTML5 DOCTYPE， 为 了 升级 到 HIMLS 需要 对 文档 的 <head> 所 做 的 修改 ， 以 及 如 何 让 HTMLS5 的 


内 容 能 够 在 所 有 浏览 器 ， 甚 至 老 版 本 的 正 中 了 


E 常 运行 。 你 看 到 了 每 一 个 HTML 文档 至 少 应 该 包含 


<html>、<head>、<tile> 和 <body> 元 素 .本章 介 绍 了 一 个 HTML5 样板 页 面 , 可 以 将 其 作为 所 有 HTML5 


文档 的 起 点 ， 另 外 还 


展示 了 如 何 对 HTMLS5 标记 进行 最 好 的 验证 。 本 章 接 着 介绍 了 HTMLS5 新 的 结 


构 化 元 素 , 包括 一 些 新 的 、 更 具 语 义 化 的 用 于 蔡 代 <div> 的 元 素 , 如 内 容 分 节 元 素 <section>、<article>、 
<aside>、<nav> 等 。 本 章 最 后 介绍 了 一 个 将 HIML 或 XHTML 页 面 转换 成 HIMLS 页 面 的 例子 。 
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思考 和 练习 


. HIML5 有 什么 新 特性 ? 

HTMLS5 新 增 的 结构 标记 有 哪些 ? 

简 述 HTML 元 素 中 常见 的 三 组 特性 。 

分 节 元 素 包括 哪些 元 素 ? 

. 如 何 让 HTML5 得 到 跨 浏览 器 支持 ? 

简 述 <div>、<section> 和 <article> 的 区 别 。 

. 参照 本 章 示例 创建 一 个 “Hello World!”Web 页 面 。 验 证 该 Web 页 面 。 

. 选择 “贝克 小 姐 ” 页 面 ， 在 相应 的 地 方 添加 HTMLS5 的 语义 化 元 素 ; 验证 “贝克 小 姐 ” 页 面 ， 
并 在 浏览 器 中 观察 页 面 效果 。 


wb 


oo 
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创建 HTML5 文 档 


HIML5 中 的 一 个 主要 变化 是 : 将 元 素 的 语义 与 元 素 对 其 内 容 呈现 结果 的 影响 分 开 。HTML 元 
素 负责 文档 内 容 的 结构 和 含义 ， 内 容 的 呈现 则 由 应 用 于 元 素 的 CSS 样式 控制 。 网 络 之 所 以 有 别 于 其 
他 媒体 ， 是 因为 网 页 中 可 以 包含 链接 (或 者 叫 超 链接 )。 本 章 主要 介绍 如 何 创建 HTMLS5 文档 ， 最 基 
础 HTML 元 素 一 -文档 元 素 和 元 数据 元 素 的 应 用 ， 以 及 导航 、 链 接 的 概念 与 使 用 方法 。 


本 章 的 学 习 目 标 : 

e 了 解 基本 的 HTML5 文档 结构 

。 掌握 基本 文本 格式 化 元 素 的 使 用 方法 
。 掌握 导航 、 链 接 的 概念 与 使 用 方法 


国 | HTML5 文档 结构 


3.1.1 构建 基本 的 文档 结构 


构成 HTML 文档 基本 结构 的 是 4 个 主要 元 素 : DOCTYPE 元 素 、html 元 素 、head 元 素 、body 
元 素 。 这 4 个 元 素 出 现在 每 个 HTML 文档 中 ， 基 本 的 文档 结构 代码 如 下 : 


<IDOCTYPE HTML> 
<html> 
<head> 
于 
<head> 
<body> 
文档 内 容 
<body> 


</html> 


1. DOCTYPE 元 素 


每 个 HTML 文档 必须 以 DOCTYPE 元 素 开 头 。 其 告知 浏览 器 两 件 事情 : 第 一 , 处 理 的 是 HTML 
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文档 ， 第 二 ， 用 来 标记 文档 内 容 的 HIML 所 属 的 版 本 。 


注意 : 
HTML 4.01 中 要 求 的 DID 已 不 在 HIML5 中 使 用 ! 
@。 ”如果 网 页 代码 含有 DOCTYPE 元 素 ， 浏 览 器 就 会 按 声 明 的 标准 解析 。 
日 如果 不 添 加 DOCTYPE 元 素 ， 将 使 网 页 进入 怪异 模式 (quirks mode)， 两 者 会 有 一 定 的 区 别 ! 
<! 一 HTML 4.01 -> 
<!DOCTYPE HIML PUBLIC "-WW3CWDTD HIML 4.0U//EN" 
"http://www.w3.0org/TR/html4/strict.dtd"> 
<!--HIMLS 一 
<!IDOCTYPE HIML> 


2. html 元 素 
html 元 素 是 整个 HTML 文档 的 包含 元 素 (containing element)。 在 DOCTYPE 声明 之 后 ， 每 个 


HTML 文档 都 应 该 有 一 个 开始 标签 <html>， 而 且 每 个 文档 都 应 该 以 结束 标签 <html> 结 束 。 
html 元 素 也 可 以 包含 id4、dir、lang 特性 。 


3. head 元 素 


head 元 素 仅仅 是 所 有 头 部 元 素 的 容器 。 它 是 开始 标签 <html> 后 出 现 的 第 一 个 标签 。 
每 个 head 元 素 内 必须 包含 一 个 title 元 素 ,， 用 以 指定 文档 的 标题 。 不 过 ， 它 还 可 以 包含 以 下 元 素 
按 任意 顺序 出 现 的 一 种 组 合 : 
e@ ”<base> 用 于 设置 相对 URL 的 解析 基准 。 
<link> 用 于 链接 外 部 文件 ， 例 如 样式 表 等 。 
<style> 用 于 在 文档 内 包含 CSS 规则 。 
<script> 用 于 在 文档 内 包含 脚本 。 
<meta> 包 含 文档 的 相关 信息 ， 比 如 一 段 描述 或 作者 姓名 等 。 
<head> 开 始 标签 可 包含 id、dir、lang 特性 。 


注意 : 

有 一 个 需要 了 解 的 <meta> 标 签 ， 就 是 <meta charset=utf-8>。 这 种 标签 与 特性 的 组 合 告知 浏览 器 
应 使 用 哪 种 字符 集 。 字 符 集 是 字符 的 集合 ， 用 于 泻 染 书写 语言 。 在 大 部 分 情况 下 ， 使 用 utf-8 将 是 最 
好 的 选择 。utf-8 包含 Unicode 字符 集 (超过 一 百 万 个 字符 ) 中 的 每 一 个 字符 。 这 意味 着 使 用 utf-8 可 以 
泻 染 从 英文 到 中 文 ， 甚 至 俄 文 的 任何 语言 。 

4. title 元 素 

使 用 title 元 素 可 以 为 网 页 设置 标题 ， 它 是 head 元 素 的 一 个 子 元 素 。 它 以 如 下 几 种 方式 呈现 和 
使 用 : 

e ”显示 在 浏览 器 窗口 的 顶端 。 


e@ 在 正 、Firefox、Chrome 等 浏览 器 中 作为 书签 的 默认 名 称 。 
e 搜索 引擎 使 用 其 内 容 帮 助 建立 页 面 索引 。 
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因此 ， 必 须 使 用 一 个 描述 网 站 内 容 的 标题 。 

检验 标题 好 坏 的 标准 是 ， 访 问 者 能 否 在 不 必 查 看 网 页 实际 内 容 的 情况 下 ， 仅 通过 标题 就 能 说 出 
将 在 页 面 中 找到 什么 ， 以 及 标题 是 否 使 用 了 人 们 搜索 此 类 信息 时 常用 的 字眼 。 

title 元 素 应 该 只 包含 标题 文本 ， 而 不 可 以 包含 任何 其 他 元 素 。 

title 元 素 可 以 包含 i4、dir、lang 特性 。 

5. 链接 与 样式 表 

下 面 简单 介绍 一 下 如 何 将 CSS 和 JavaScript 包含 于 网 页 中 。 

添加 样式 表 需 要 依靠 <link> 元 素 。<link> 元 素 同样 使 用 href 特性 。 该 特性 用 于 指向 Web 上 的 某 
个 资源 。 在 这 里 ， 使 用 href 不 是 为 了 在 单 击 链接 时 打开 一 个 新 页 面 或 网 站 ， 而 是 指向 一 个 为 当前 页 
面 提供 样式 信息 的 文件 位 置 .rel 特性 指明 链接 的 文档 是 一 个 样式 表 , 并 且 浏览 器 应 据 此 做 相应 处 理 。 

<link rel="stylesheet" href="css/main.css"> 

向 页 面 添加 脚本 则 更 加 简单 。 在 页 面 中 添加 一 个 <script> 元 素 ， 然 后 添加 sre 特性， 指向 需要 使 
用 的 JavaScript 文件 的 位 置 。 


‘<script sre="js/main.js"></script> 


注意 : 
即使 对 于 使 用 <script> 元 素 的 情况 ， 在 开始 和 结束 标签 之 间 没有 任何 内 容 , 但 在 插入 一 个 脚本 元 
素 时 ， 也 要 永远 记得 包含 一 个 结束 标签 </script>。 


3.1.2 用 元 数据 元 素 说 明文 档 


meta( 元 数据 ) 是 用 来 描述 HTML 文档 的 信息 ， 它 使 用 meta 元 素来 完成 此 工作 ，meta 元 素 位 于 
<head> 和 </head> 标 签 对 内 。 在 <head> 和 </head> 标 签 对 内 包含 以 下 用 以 说 明文 档 信息 的 功能 。 


1. 设置 文档 标题 
用 tile 元 素 设置 文档 标题 ， 如 3.1.1 节 所 述 。 
2. 设置 相对 URL 的 解析 基准 


base 元 素 可 用 来 设置 基准 URL， 让 HIML 文档 中 的 相对 链接 在 此 基础 上 进行 解析 。base 元 素 
还 能 设 定 链接 在 用 户 单 击 时 的 打开 方式 ， 以 及 提交 表单 时 浏览 器 如 何 反应 。 

例 3-1: 在 HIML 文档 中 指定 相对 链接 的 基准 URL 为 http://www.ykpmjt.cn， 并 指定 链接 打开 
方式 为 “当前 页 面 ”。 在 浏览 器 中 显示 的 效果 如 图 3-1 所 示 ， 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
-<meta charset="UTF-8"> 
<title>Base Test</title> 
<!- 指定 相对 URL 的 基准 URL -> 
<base href="http://www.yk pmijt cn"> 
<!- 指定 链接 打开 方式 为 :当前 页 面 ~> 


和 ss 
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<base target- ”self> 
</head> 


<!-- 图 片 地 址 :http:// www.ykpmit.cn/Images/qywh gif -> 
<img sre="/Images/qywh.gif" alt=" 企 业 文化 "> 
<a href=" "> 平 煤 股份 一 矿 </a> 

</body> 

</html> 


D Base Test 


CG OMe//FMm5+css3m5/31 VO 让 


企业 
文化. 


图 3-1 示例 页 面 在 济 览 器 中 的 显示 效果 


注意 : 
如 果 不 指定 基准 URL， 那 么 浏览 器 会 将 当前 文档 的 URL 认定 为 所 有 相对 URL 的 解析 基准 。 


3. 用 元 数据 说 明文 档 


meta 元 素 可 以 用 来 定义 文档 的 各 种 元 数据 ， 每 个 meta 元 素 只 能 用 于 下 面 一 种 用 途 。 
(1) 指定 名 / 值 元 数据 对 
表 3-1 提供 了 5 个 预定 义 的 元 数据 ， 需 要 用 到 name 和 content 属性 。 


表 3-1 预定 义 的 元 数据 


元 数据 名 称 说 明 
ication name 当前 页 面 所 属 Web 应 用 系统 的 名 称 
author 当前 页 面 的 作者 名 
description 当前 页 面 的 说 明 
enerator 用 来 生成 HTML 的 软件 名 称 
keywords 一 批 以 逗号 分 开 的 字符 串 ， 用 来 描述 页 面 的 内 容 
(2) meta 元 素 的 其 他 用 途 


meta 还 可 以 用 于 设置 文档 内 容 的 字符 编码 方式 ， 用 于 计时 刷新 页 面 及 计时 跳 转 页 面 的 设置 等 。 
代码 如 下 : 


<!- 文档 内 容 的 字符 编码 -> 

<meta charset="UTF-8"> 

<meta http-equiv="content-type” content="text/html charset=UTF-8"> 
<!- 5s 后 刷新 当前 页 面 -> 

<meta http-equiv—"refresh" content="5"> 

<!-- 5s 后 跳 转 到 百度 > 

<meta http-equiv—"refresh" content—"5; http://www.baidu.com"> 
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4. 定义 CSS 样式 


style 元 素 用 来 定义 HTML 文档 内 嵌 的 CSS 样式 ，link 元 素 用 来 导入 外 部 样式 表 中 的 样式 。 

(1) 指定 样式 适用 的 媒体 

media 属性 可 用 来 表明 文档 在 什么 情况 下 应 该 使 用 元 素 中 定义 的 样式 ， 如 表 3-2 所 示 。 

表 3-2 media 属性 的 值 
设备 说 明 
ll 所 有 设备 (默认 ) 
aural 语音 合成 器 
盲文 设备 


打印 预览 和 打印 页 面 


计算 机 显示 器 屏幕 
电 传 打字 机 之 类 的 等 宽 设 备 


例 3-2: 使 用 media 属性 指定 在 不 同 的 设备 上 显示 的 背景 色 。 其 中 ， 在 计算 机 显示 器 屏幕 上 ， 
当 字 块 宽度 小 于 500px 时 背景 为 蓝 色 ， 如 图 3-2 所 示 ; 当 字 块 宽度 大 于 500px 时 背景 为 灰色 ， 如 图 
3-3 所 示 。 另 外 设置 打印 页 面 的 背景 为 蓝 色 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Style Test</title> 
<!-- 显示 样式 && 小 于 500px -> 
<style media="screen and (max-width:500px)"> 
div{ 
background-color blue: 
color white: 
} 
</style> 
<!-- 显示 样式 && 大 于 500px -> 
<style media="screen and (min-width:500px)"> 
div{ 
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图 3-2 字 抉 宽度 小 于 500px ”图 3-3 字 块 宽度 大 于 s00px 
(2) 指定 外 部 资源 
link 标签 同样 支持 ref 属性 。ref 属性 决定 浏览 器 对 待 link 元 素 的 方式 ， 见 表 3-3。 
表 3-3 ref 属性 的 值 


示例 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Link Test</title> 
<link rel="shortcut icon" hre 全 "favicon ico" type="image/x-icon" /> 
</head> 
<body> 
<body> 
</html> 
注意 各 
如 果 网 站 标志 文件 位 于 项 目 根 目录 下 , 就 无 须 使 用 link 元 素 加 载 , 而 是 会 自动 请 求 加 载 该 文件 。 


3.1.3 ”使 用 脚本 元 素 


有 两 个 元 素 与 脚本 相关 : 第 一 个 是 script， 它 定义 脚本 并 控制 其 执行 过 程 ， 第 二 个 是 noscript， 
它 规定 浏览 器 不 支持 脚本 或 禁用 脚本 情况 的 处 理 方法 。 在 引入 外 部 资源 时 ， 如 果 使 用 自 闭合 标签 ， 
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浏览 器 会 忽略 这 个 元 素 ， 不 会 加 载 引用 的 文件 。 加 载 资源 时 ， 可 以 使 用 asyne(script 元 素 的 默认 行为 
是 在 加 载 和 执行 脚本 时 暂停 处 理 页 面 ， 从 而 可 以 让 资源 异步 加 载 ) 和 defer( 告 知 浏览 器 等 页 面 载 入 和 
解析 完毕 后 才能 执行 脚本 ) 来 控制 。 

示例 如 下 : 

<!-- 未 启用 或 不 支持 脚本 -> 


<!~5s 后 跳 转 到 百度 -> 


<meta http-equiv="refresh" content="5; http://www.baidu.com "> 
/noscrip> 


构建 文档 主体 


3.2.1 基本 文本 格式 化 


在 本 节 中 将 介绍 如 何 使 用 下 列 “ 基 本 文本 格式 化 元 素 ”。 

<h1>、 <h2>、<h3>、<h4>、<h5>、<h6>、<p>、<b>、<pre> 

每 种 浏览 器 都 会 以 特定 的 方式 显示 它们 中 的 每 个 元 素 ， 因 此 不 同 的 浏览 器 会 以 稍微 不 同 的 方式 
显示 同一 页 面 。 比 如 所 使 用 的 字体 、 文 字 的 大 小 以 及 元 素 周围 空白 区 域 的 大 小 等 ， 在 不 同 浏览 器 中 
的 显示 都 可 能 不 尽 相同 ， 因 此 一 段 文 本 占用 的 空间 大 小 也 可 能 发 生变 化 。 


1. 空格 与 流 


在 开始 标记 文本 之 前 , 要 先 了 解 一 下 当 HTML 遇 到 空格 时 的 行为 ， 以 及 浏览 器 是 如 何 处 理 长 句 
子 和 文本 段落 的 。 

如 果 在 两 个 词 之 间 加 入 数 个 连续 的 空格 ， 那 么 在 屏幕 上 这 些 空格 不 会 出 现在 这 两 个 词 之 间 。 默 
认 情 况 下 ， 只 有 一 个 空格 会 被 显示 。 这 种 处 理 方式 被 称 为 “空格 压缩 ”。 类 似 地 ， 如 果 在 源 文档 中 
另 起 一 个 新 行 ， 或 者 有 多 个 连续 的 空 行 ， 这 些 都 会 被 忽略 ， 并 会 作为 一 个 空格 处 理 。 这 一 规则 同样 
适用 于 制 表 符 。 例 如 ， 下 面 的 段落 在 浏览 器 中 的 显示 效果 如 图 3-4 所 示 。 

<p> 此 段 ”显示 。 如 何 将 单词 之 间 的 ”多 个 空格 。 视 为 单个 空格 。 

这 称 为 白色 空间 折 友 ， 


某 些 单词 之 间 的 大 空间 ”不 会 出 现在 
浏览 器 中 。 


它 还 演示 了 浏览 器 如 何 将 多 个 回 车 

(新 科 视 为 单个 空谷 。<fp> 

在 图 3-4 中 , 浏览 器 将 多 个 空 行 以 及 若干 换行 都 以 单个 空格 处 理 。 它 还 使 文本 行 完全 占据 浏览 
器 窗口 的 全 部 宽度 。 

空格 压缩 有 时 非常 有 用 ,因为 它 允 许 在 HIML 中 加 入 额外 的 空格 ， 而 在 浏览 器 中 查看 时 又 不 会 
显示 。 可 以 利用 这 一 特性 对 代码 进行 缩 进 ， 从 而 提高 代码 的 可 读 性 。 前 面 的 示例 演示 了 代码 缩 进 ， 
子 元 素 由 左 向 右 缩 进 ， 将 它们 与 父 元 素 区 分 开 ， 从 而 保证 可 读 性 。 如 果 想 保留 文档 中 的 空格 ， 可 以 
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使 用 <pre> 标 签 ， 也 可 以 使 用 实体 引用 ， 例 如 使 用 特殊 字符 &nbsp;， 它 代表 一 个 不 间断 空格 。 
2. 使 用 <hn> 元 素 创建 标题 


无 论 要 创建 何 种 文档 ， 大 多 数 文档 都 具有 某 种 形式 的 标题 。 报 纸 使 用 的 是 头条 标题 ; 表单 的 标 
题 告诉 你 表单 的 用 途 ， 而 比赛 结果 表 的 标题 会 告诉 你 球 队 所 在 的 联盟 或 赛区 ， 等 等 。 

在 较 长 的 文本 片段 中 ， 标 题 还 可 以 帮助 组 织 文档 结构 。 如 果 查 看 一 下 本 书 的 目录 ， 就 能 看 到 不 
同 级 别 的 标题 是 如 何 组 织 的 ， 利 用 在 主 标题 下 设置 次 级 标题 的 方式 ， 为 本 书 添加 了 目录 。 

HTML 提供 6 个 级 别 的 标题 ， 使 用 元 素 <hl>、<h2>、<h3>、<h4>、<h5> 以 及 <h6> 来 表示 。 浏 
览 器 以 6 个 元 素 中 的 最 大 字体 显示 <hl>， 而 <h6> 则 最 小 。 不 同 级 别 标题 的 显示 效果 如 图 3-5 所 示 。 


Heading1 
白色 空间 折 鳃 ， 革 些 单词 之 间 的 大 空间 不 会 出 现在 浏览 器 中 . Heading2 


它 还 演示 了 浏览 寡 如 何 将 多 个 回 车 〈 新 行 ) 视 为 单个 空格 . 
Heading3 


”图 34 “多 个 空格 、 空 行 在 浏览 器 中 的 显示 效果 图 3-5 不 同 级 别 标题 的 显示 效果 


注意 : 

大 多 数 浏览 器 在 显示 <hl>、<h2>、<h3> 元 素 的 内 容 时 会 使 用 大 于 文档 默认 的 文本 字体 大 小 ; 
<h4> 的 内 容 会 与 默认 文本 的 字体 大 小 相同 ; 而 <h5> 和 <h6> 的 内 容 则 会 小 于 默认 字体 ,除非 使 用 CSS 
对 它们 另外 进行 设置 。 


例 3-3: 使 用 标题 组 织 文 档 结构 。 其 中 <h2> 元 素 是 <h1> 元 素 的 次 级 标题 。 图 3-6 在 浏览 器 中 展 
示 效 果 。 代 码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 创 建 标题 <title> 

</head> 

<body> 

<hl> 基 本 文本 格式 <hl> 

<p> 本 节 将 介绍 标记 文本 的 方式 。 您 创建 的 几乎 每 个 文档 都 包含 某 种 形式 的 文本 ， 因 此 这 将 是 一 个 非常 重要 的 部 分 。 
<p> 

<h2> 空 格 与 流 <h2> 

<p> 在 开始 标记 文本 之 前 ， 要 先 了 解 一 下 当 HTML 遇 到 空格 时 的 行为 ， 以 及 浏览 器 是 如 何 处 理 长 句子 和 文本 段落 的 。 
<p> 

<h2> 创 建 标题 <h2> 

<p> 无 论 你 要 创建 何 种 文档 ， 大 多 数 文档 都 具有 某 种 形式 的 标题 或 其 他 ...<fp> 

<body> 

<mhtml> 
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本 节 中 的 6 个 标题 元 素 都 可 以 包含 以 下 通用 特性 : 


class id style tile dir lang 
3. 使 用 <p> 元 素 创建 段落 


<p> 元 素 为 结构 化 文本 提供 了 另 一 种 方式 。 每 个 文本 段落 都 应 该 置 于 开始 标签 <p> 与 结束 标签 
</p> 之 间 ， 如 下 所 示 : 

<p>Here is a paragraph of text.</p> 

<p>Here is a second paragraph of text.</p> 

<p>Here is a third paragraph of text.</p> 

当 浏 览 器 显示 一 个 段落 时 , 通常 会 在 下 一 个 段落 前 插入 一 个 空 行 , 并 加 入 少许 额外 的 纵向 空间 ， 
如 图 3-7 所 示 。 


DD bE mm 
© |© fey//FimS +ess3/n5/3-3ml 


基本 文本 格式 


杰 节 将 介绍 家 记 文本 的 方式 ， 您 创建 的 儿科 每 个 文 匀 都 包 生 革 种 形式 的 文 太 ， 因 此 这 将 是 一 
个 达 更 要 的 部 分 。 


空格 与 流 


© OfleW/FVh5rcss3/h5/3-4html 


在 开始 多 本 之 戎 ,要 先 了 解 一 下 当 HTML 时 的 行为 ,以 及 济 耻 于 如 何 处 青 长 人 
名 了 各 


不 了 区 的 。 


Here is a second paragraph of text. 
创建 标题 


无 你 要 和 何 往 广 粒 ， 大 多 效 文 习 部 只 有 某 种 形式 的 杯 秘 或 其 他 - 


Hereisathird paragraph oftext 


图 3-6 使 用 标题 组 织 文档 结构 图 3-7 使 用 <p> 元 素 创建 段落 
<p> 元 素 可 包含 所 有 通用 特性 : 


class id style title dir lang 
4. 使 用 <br> 元 素 换行 


任何 时 候 ， 当 使 用 <br> 元 素 时 ， 它 后 面 的 内 容 都 会 换行 显示 。<br> 元 素 是 “ 空 元 素 ”的 一 个 例 
子 ， 不 需要 开 闭 标签 对 ， 因 为 二 者 问 不 会 有 任何 内 容 。 

可 以 使 用 多 个 <br> 元 素 将 文本 下 推 多 行 ， 相 比 于 使 用 <p> 元 素 结构 化 文本 ， 很 多 网 页 设计 者 更 
喜欢 在 文本 段落 间 使 用 两 个 换行 符 ， 如 下 所 示 : 

Paragraph one<br><br> 

Paragraph two<br><br> 

Paragraph three<br><br> 

尽管 两 个 <br> 元 素 看 起 来 效果 同 使 用 <p> 元 素 类 似 ， 但 是 要 记 住 ，HIML 标记 应 该 用 于 描述 内 
容 的 结构 。 所 以 ， 在 段落 间 插 入 两 个 <br> 元 素 ， 并 不 是 描述 文档 结构 的 行为 。 


注意 : 
从 严格 意义 上 讲 , 不 应 该 使 用 <br> 元 素来 控制 文本 位 置 , 应 该 只 在 块 级 元 素 内 部 使 用 它 , 而 <p> 
元 素 就 是 一 个 块 级 元 素 。 


Le 
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下 面 是 一 个 在 段落 中 使 用 <br> 元 素 的 例子 : 


<p>When you want to start a new line you can use the line break element. 
So the next<br />word will appear on a new line.</p> 


图 3-8 展示 了 在 单词 “next” 和 “do” 之 后 换行 的 效果 。 


Ge De ge Hy Bhrets Dk hp 


When you want tp stast a new Ene you can ose the lne bre dlemert So, the et 
word will appear on a new bne. 


wa 


Some Web desipnerr siememe efthe documenr md a6d ex 
wie space. You el te nn bvak cmetts to creat ps cE severid een Le Ees 
boutto do 


here becavse rhis res: i stil in the sume paragraph clement. Ruther than Ding rhe ne break dlement 
to add We apace te yo docomerts, Ei betier to vse CSS 


ome 


图 3-8 在 单词 “next” 和 “do” 之 后 换行 的 效果 
<br> 元 素 可 以 包含 以 下 特性 : 

class id style title 

5. 使 用 <pre> 元 素 预 格 式 化 文本 

如 果 想 让 文本 与 它 写 在 HTML 文档 中 的 格式 完全 保持 一 致 , 在 文本 行 到 达 浏 览 器 边框 时 不 自动 


换行 (浏览 器 能 够 忽略 多 个 空格 ， 并 且 让 文本 行 能 够 按照 编写 时 的 格式 换行 )， 那 么 可 以 使 用 <pre> 元 
素 预 格式 化 文本 以 达到 上 述 目的 。 


任何 位 于 <pre> 开 始 标签 和 </pre> 结 束 标签 之 间 的 文本 都 会 保持 它 在 源 文件 中 的 格式 。 但 同时 ， 


大 多 数 浏 览 器 默认 会 使 用 等 宽 字体 显示 这 种 文本 (Courier 字体 就 是 一 种 等 宽 字体 ， 因 为 每 个 字母 都 
占用 相同 的 宽度 。 与 之 相对 的 是 不 等 宽 字 体 ， 这 种 字体 中 ， 字 母 “i” 的 宽度 通常 小 于 字母 “m” 的 
宽度 )。 


<pre> 元 素 最 常用 于 显示 源 代码 。 例 如 ， 下 面 展 示 了 <pre> 元 素 中 的 一 些 JavaScript 代码 : 


<pre> 

function testPunction(strText) { 
console.log(strText) 

} 

</pre> 


图 3-9 展示 了 <pre> 元 素 中 的 内 容 是 如 何以 等 宽 字 体 显示 的 。 更 重要 的 是 , 可 以 看 到 它 是 如 何 遵 


循 <pre> 元 素 内 的 显示 格式 的 一 一 空格 得 到 了 保留 。 


The folowing text is writeaiaside a <pre> cjement Mulipie spaces should be preserved and 
the line breaks should appear where hey do in he source docement 


cescFuncclon (strTeat)t 
193(sczTexc) 


The contert of the <pre> clement is most kely displayed in a monospaced fent 


3-9 ”<pre> 元 素 中 的 内 容 以 等 宽 字体 显示 
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尽管 制 表 符 在 <pre> 元 素 中 可 以 起 作用 , 而 且 制 表 符 应 该 以 8 个 空格 的 宽度 显示 , 但 不 同 浏览 器 
对 制 表 符 的 处 理 也 不 尽 相同 ， 所 以 应 尽量 使 用 空格 蔡 代 制 表 符 。 


6. 基本 文本 格式 化 示例 


例 3-4: 为 一 家 名 为 Example Café 的 公司 创建 一 个 网 页 。 这 个 网 页 将 被 作为 网 站 的 首页 ， 用 于 
向 人 们 介绍 咖啡 馆 。 
(1) 添加 文档 框架 : DOCTYPE 声明 以 及 <html>、<head>、<title> 和 <body> 元 素 。 


<!doctype html> 
<html> 
<head> 
<title>Example Cafe - community cafe ip Newquay. Comwall, UK </title> 
</head> 
<body> 


</body> 
</html> 


整个 网 页 都 包含 在 <html> 元 素 中 。<html> 元 素 只 能 包含 两 个 子 元 素 : <head> 元 素 和 <body> 元 素 。 
<head> 元 素 包含 页 面 的 标题 ， 从 标题 中 能 知道 页 面 所 包含 内 容 的 类 型 。 

与 此 同时 ，<body> 元 素 包含 网 页 的 主体 部 分 。 这 一 部 分 也 是 在 Web 浏览 器 中 实际 可 见 的 部 分 。 

(2) 向 页 面 中 添加 主 标题 以 及 一 些 二 级 标题 ， 从 而 为 页 面 信息 添加 结构 : 


<body> 
<hl>EXAMPLE CAFE</hl> 
<h2>A community cafe serving home cooked, locally sourced, organic food</h2> 
<h2>This weekend's special brunch</h2> 

<body> 


(3) 在 标题 后 向 页 面 内 填 入 一 些 文本 段落 : 


<body> 
<hl>EXAMPLE CAFE<hl> 
<p>Welcome to example cafe. We will be developing this site throughout 
the book.</p> 
<h2>A community cafe serving home cooked, locally sourced. organic food</h2> 
<p>With stunning views of the ocean. Example Cafe offers the perfect 
environment to unwind and recharge the batteries.</p> 
<p>Our menu offers a wide range of breakfasts, bunches and lunches, 
including a range of vegetarian options.</p> 
<p>Whether you sip on a fresh. hot coffee or a cooling smoothie, you never 
need to feel rushed - relax with fiiends or just watch the world go by.</p> 
<p>This weekend., our season of special brunches continues with scrambled egg 
on an English muffin. Not for the faint-hearted, the secret to these eggs is 
that they are made with half cream and cooked in butter, with no more than 
four eggs in the pan at a time.</p> 
<body> 


(4) 以 文件 名 “index.html” 保 存 文件 ， 然 后 在 Web 浏览 器 中 打开 ， 显 示 的 效果 如 图 3-10 所 示 。 
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EXAMPLE CAFE 
Welcome to example Cate. We will be developing this site throughout the book 


A community cafe serving home cooked, locally sourced, organic 
food 


With stunning views of the ocean Example Cafe offers the perfect environment to unwind and recharge the 
teries. 


Our menu offers a wide range of breakfasts, brunches and lunches, including a range of vegetarian options. 
‘Whether you sip on a fresh, hot coffee or a cooling smoothie, you never need to feel rushed - relax with 
friends or just watch the world go by 

This weekend's special brunch 

This weekend our season of special brunches continues with scrambled egg on an English muffin. Not for 


‘the faint-hearted, the secret to these eggs is that they are made with half cream and cooked in butter, with 
no more than four eggsin the pan at a time. 


图 3-10 网 页 在 Web 浏览 器 中 的 显示 效果 


这 个 基础 框架 包含 <head> 和 <body> 元 素 , 并且 将 <p> 元 素 和 标题 结合 起 来 使 用 ,虽然 可 能 简单 ， 
但 却 代表 一 个 完整 的 网 页 。 即 使 没有 任何 样式 信息 ， 但 <p> 元 素 以 及 <h1>、<h2> 元 素 的 默认 泻 染 风 
格 为 页 面 提供 了 不 错 的 结构 。 


3.2.2 ”链接 与 导航 


网 络 之 所 以 有 别 于 其 他 媒体 ， 是 因为 网 页 中 可 以 包含 链接 (或 者 叫 超 链接 )。 通 过 单 击 链接 ， 可 
以 从 一 个 页 面 跳 转 到 另 一 个 页 面 。 链 接 的 形式 可 以 是 一 个 单词 、 一 条 短语 或 一 幅 图 片 。 

指向 同一 网 站 中 其 他 页 面 的 链接 被 称 作 “内 部 链接 ”。 当 链接 到 不 同 网 站 时 ， 链 接 为 “外 部 链 
接 ”。 外 部 链接 使 用 “绝对 URL 地 址 ”， 包 含 完整 的 Web 地 址 (例如 http://www.baidu.cony)。 本 节 
将 介绍 如 何 创建 这 两 种 链接 以 及 在 页 面 内 链接 到 指定 位 置 。 


1. 基本 链接 


可 以 使 用 <a> 元 素 指定 链接 。 开 始 标签 <a> 与 结束 标签 </a> 之 间 的 内 容 将 成 为 链接 在 浏览 器 中 可 
供用 户 单 击 的 部 分 。 

(1) 链接 到 其 他 网 页 

为 链接 到 其 他 网 页 ，<a> 标 签 必须 带 有 一 个 叫 作 href 的 特性 。 该 特性 的 值 是 将 要 链接 的 文件 的 
名 称 。 例 如 ， 下 面 是 一 个 页 面 的 <body> 部 分 。 该 页 面包 含 一 个 指向 另 一 个 页 面 index.html 的 链接 。 

<body> 

<p>Retum to the <a href-="index html">home page</a>.</p> 

<body> 

只 要 indexhtml 与 当前 页 面 文件 处 于 同一 目录 中 ， 在 
单 击 “home page” 之 后 ，index.html 页 面 就 会 被 载 入 同一 
窗口 ， 并 取代 当前 页 面 。 如 图 3-11 中 所 示 ，<a> 元 素 的 内 
容 构成 了 链接 。 如 果 需 要 链接 到 其 他 网 站 ， 同 样 需要 使 用 
<a> 元 素 ， 只 是 这 种 情况 下 不 能 只 简单 指明 文件 名 ， 还 需 
要 指定 希望 链接 的 页 面 的 完整 网 址 。 以 下 是 一 个 链接 到 外 图 3-11 <a> 元 素 的 内 容 构成 了 链接 
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部 网 站 的 例子 ， 该 链接 指向 Wrox 网 站 : 


<body> 
<p>Why not visit the <a href="http://www.wrox.com/">Wrox Web site</a>?</p> 
</body> 


href 特性 的 值 就 是 直接 访问 Wrox 站 点 时 需要 在 浏览 器 中 输入 的 网 址 。 完 整 的 Web 地 址 经 常 被 
称 为 “统一 资源 定位 符 ”(Uniform Resource Locator，URL)。 因 为 包含 完整 的 Web 地 址 ， 所 以 又 被 
称 为 “绝对 URL”。 很 多 网 页 设计 者 还 喜欢 在 <a> 元 素 中 使 用 图 片 。 当 使 用 图 片 链接 时 ， 需 要 确保 
使 用 的 图 片 能 够 清晰 表达 链接 所 指向 的 内 容 。 

在 链接 中 还 可 以 使 用 tite 特性 。title 特性 的 值 应 为 指向 内 容 的 描述 信息 。 当 鼠标 悬浮 于 链接 上 
时 ， 该 信息 会 以 提示 标签 的 形式 进行 显示 。 在 使 用 图 片 链接 时 ， 这 种 机 制 很 有 帮助 。 

下 面 是 一 个 指向 Google 首页 的 链接 : 

<p><a href="http://www.Google.com/" title="Search the Web with Google">Google</a> 

is avery popular search engine.</p> 

图 3-12 是 title 特性 的 展现 效果 。 当 鼠标 悬浮 于 链接 上 时 ， 该 特性 会 向 用 户 展现 链接 的 进一步 信 
息 。 由 于 <a> 元 素 中 的 任何 内 容 都 会 被 泻 染 为 一 个 链接 ， 包 括 字符 或 图 片 周 围 的 空格 ， 因 此 应 该 避 
免 在 开始 标签 <a> 之 后 以 及 结束 标签 </a> 之 前 直接 使 用 空格 。 例 如 ， 下 面 的 代码 在 <a> 元 素 内 带 有 空 
格 : 

Why not visit the<a href="http://www.wrox.com/"> Wrox Web site </a>? 


如 图 3-13 所 示 ， 链 接 中 的 空格 也 被 加 上 下 划 线 进行 显示 。 


BA Hr 
Gases avy pae sans 


Why not vi the Wrox Web ste 7 


图 3-12 title 特性 的 展现 效果 图 3-13 ”链接 中 的 空格 也 被 加 上 下 划 线 
如 果 把 空格 移 到 链接 标签 外 ， 就 会 好 很 多 ， 如 下 所 示 : 


Why not visit the <a href="http://www.wrox.com/">Wrox Web site</a>? 

(2) 链接 到 电子 邮件 地 址 

在 包含 电子 邮件 地 址 的 网 页 中 ， 当 单 击 链接 时 ， 会 在 电子 邮件 程序 中 打开 一 个 新 邮件 ， 并 且 会 
在 “ 收 件 人 ”中 预先 填 入 该 电子 邮件 地 址 。 

为 创建 电子 邮件 地 址 链接 ， 需 要 按 如 下 语法 使 用 <a> 元 素 : 

<a hre 全 "mailtoname@example.com">name@example.com</a> 

此 处 href 特性 的 值 由 关键 字 mailto 开始 ， 随 后 是 冒号 ， 然 后 是 希望 发 送 到 的 电子 邮件 地 址 。 与 
其 他 形式 的 链接 一 样 ，<a> 元 素 的 内 容 是 浏览 器 中 所 显示 链接 的 可 见 部 分 ， 所 以 如 下 用 法 同样 可 行 : 


<a href="mailto:name(@example.com">E-mail us</a>. 
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2. 链接 实例 


下 面 用 一 个 例子 说 明 如 何 创建 链接 。 

例 3-5: 创建 一 个 页 面 ， 其 中 包含 三 种 类 型 的 链接 一 一 一 个 内 部 链接 、 一 个 外 部 链接 以 及 一 个 
电子 邮件 地 址 链接 。 

(有 ) 检查 并 确认 页 面 内 容 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Example Cafe - community cafe in Newquay, Comwall, UK</title> 
</head> 
<body> 
<hl>EXAMPLE CAFE</h1l> 
<p>Welcome to Example Cafe. We will be developing this site throughout 
the book.</p> 
<h2>Contact</h2> 
<address>12 Sea View, Newquay, Comwall, UK</address> 
<body> 
</html> 


(2) 加 入 站 内 页 面 间 导航 。 将 第 一 段 内 容 (位 于 <h1> 元 素 之 后 ) 蔡 换 为 指向 站 内 其 他 三 个 页 面 的 链 
接 。 如 下 所 示 , 每 一 个 <a> 元 素 都 应 该 包含 其 指向 页 面 的 名 称 . 最 后 , 将 这 些 链接 元 素 一 同 放 入 <nav> 
元 素 : 
<hl>EXAMPLE CAFE</hl> 
<nav> 
<a hre 全 ">HOME</a> 
<a hre 人 ">MENU</a> 
<a hre 全 ">RECIPES</a> 
</nav> 


(3) 加 入 联系 页 面 的 名 称 。 不 过 不 要 将 其 设置 为 链接 ， 因 为 用 户 已 经 位 于 该 页 面 ， 不 需要 再 链 
接 到 页 面 自身 : 


<hl>EXAMPLE CAFE</hl> 
<nav> 
<a href="">HOME</a> 
<ahre 全 ">MENU</a> 
<ahre 全 ">RECIPES</a> 
CONTACT 
</nav> 


(4) 添加 各 页 面 的 文件 名 作为 href 特性 的 值 : 


<hl>EXAMPLE CAFE</h1> 
<div> 
<ahref-"index html">HOME</a> 
<a href="menu html">MENU</a> 
<a href="recipes html">RECIPES</a> 
CONTACT 
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<div> 

因为 这 些 页 面 文件 位 于 同一 文件 夹 内 ， 所 以 只 需要 指定 文件 名 ， 而 不 需要 完整 的 URL。 

(5) 在 以 上 包含 地 址 的 段落 之 后 ， 在 下 一 段 中 加 入 一 个 指向 Google Maps 的 链接 ， 比 如 : 

<p><a href="http://maps.google.com/maps?q-newaquay">Find us on Google Maps</a></p> 

这 一 次 ，href 特性 的 值 是 在 浏览 器 中 访问 Google Maps 以 寻找 Newquay 的 地 图 时 将 会 使 用 的 
地 址 。 

(6) 在 Google Maps 链接 之 下 ， 添 加 一 个 向 info@examplecafe.com 发 送 电 子 邮 件 的 链接 : 

<p><a href="mailto:info@examplecafe.com">Mail Example Cafe</a></p> 

这 一 次 ，href 特性 的 值 以 “mailto:” 开 始 ， 接 着 是 电子 邮件 地 址 。 

(7) 将 文件 以 contacthtml 为 文件 名 保存 在 同一 目录 下 ， 作 为 本 章 的 示例 应 用 程序 。 然 后 在 浏览 
器 中 打开 并 查看 保存 的 页 面 文件 。 包 含 三 种 类 型 链接 的 页 面 的 效果 如 图 3-14 所 示 。 


EXAMPLE CAFE 


HOME MENU RECIPES CONTACT 


Contact 


12 Sea Wew Newquay; Cormwall UK 


图 3-14 包含 三 种 类 型 链接 的 页 面 


本 例 中 使 用 三 种 不 同 风格 的 URL 来 创建 链接 。 在 站 点 导航 中 使 用 的 相对 URL 基于 页 面 所 在 位 
置 进行 解析 ; 而 指向 Google Maps 的 绝对 URL 则 代表 网 络 上 该 资源 的 完整 地 址 ; 最 后 的 电子 邮件 地 
址 链接 则 会 打开 用 户 的 电子 邮件 客户 端 以 发 送 电子 邮件 。 


3. 目录 与 目录 结构 


“目录 ”是 网 站 中 对 文件 夹 的 另 一 种 称呼 。 类 似 于 硬盘 中 包含 不 同 的 文件 夹 ， 一 个 网 站 可 以 包含 
多 个 目录 。 例 如 ， 一 个 包含 多 个 版 块 的 大 型 网 站 ， 可 能 每 个 版 块 都 有 一 个 独立 的 目录 ， 并 针对 不 同 
类 型 的 文件 设 有 不 同 的 目录 (例如 ， 图 片 文件 和 样式 表 文件 都 可 能 有 各 自 的 目录 )。 

图 3-15 展示 了 一 个 新 闻 网 站 的 目录 结构 ， 该 目录 结构 中 的 每 个 版 块 都 有 各 自 的 文件 夹 。Music 
版 块 中 还 拥有 自己 的 子 版 块 文件 夹 ， 包 含 Features、MP3s 以 及 Reviews。 除 此 之 外 ， 主 文件 夹 还 包 
含 用 于 存放 不 同类 型 文件 的 子 文件 来， 包括 Images、Scripts 和 Style Sheets。 

在 学 习 链接 的 同时 ， 了 解 一 些 有 关 描述 目录 结构 以 及 目录 间 关 系 的 术语 会 对 学 习 很 有 帮助 。 参 
照 图 3-15 理解 目录 结构 : 

。 “ 根 目录 ”或 根 文件 夹 是 网 站 的 主 目录 ， 包 含 整个 网 站 的 内 容 。 在 本 例 中 是 

exampleNewsSite.com 目录 。 
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e “ 子 目录 ”是 位 于 其 他 目录 中 的 目录 。 本 例 中 Film 目录 是 Entertainment 目录 的 一 个 子 
目录 。 

@ “ 父 目 录 ” 是 包含 其 他 目录 的 目录 。 本 例 中 Entertainment 目录 是 Ars、Film、Music 以 及 
TV 目录 的 父 目 录 。 


4. 理解 URL 概念 


“统一 资源 定位 符 ”(Uniform Resource Locator，URL) 指 定 在 网 络 上 从 哪里 可 以 找到 某 一 资源 。 
在 网 络 中 浏览 时 ， 可 以 在 浏览 器 的 地 址 栏 中 看 到 每 一 个 Web 页 面 的 URL 地 址 。 
如 图 3-16 所 示 ，URL 包含 三 个 关键 组 成 部 分 : 协议 、 主 机 地 址 以 及 文件 路 径 。 
主机 地 址 


http://www.wrox.com/index.html 
oo— 


协议 文件 路 径 
图 3-16 URL 的 组 成 


下 面 依次 介绍 这 些 概念 。 

“协议 ”指明 文件 将 以 何 种 方式 传输 。 大 多 数 Web 页 面 使 用 所 谓 的 “ 超 文本 传输 协议 ”HyperText 
Transfer Protocol，HTTP) 传 输 信息 ， 这 就 是 为 什么 大 多 数 网 页 的 地 址 以 “http:/” 开 头 的 原因 。 还 有 
其 他 前 级 ， 如 使 用 电子 银行 时 会 看 到 “https://”(HTTPS 是 HTTP 的 一 种 更 安全 形式 )， 或 者 下 载 大 
型 文件 时 看 到 的 “ftp/”。 

“主机 地 址 ”通常 是 网 站 的 域名 ， 如 wrox.com。 经 常会 在 域名 前 看 到 “www” 前 级 ， 但 它 实际 
上 并 非 域名 的 一 部 分 。 主 机 地 址 还 可 以 是 称 为 他 地 址 的 数字 形式 。 

“文件 路 径 ” 永 远 以 正和 斜 线 () 开 头 ， 并 可 能 包含 一 个 或 多 个 目录 名 称 . 文件 路 径 可 能 以 一 个 文件 
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名 结束 ， 例 如 下 例 中 的 BeginningHTML html 就 是 文件 名 : 

/books/BeginningHTML html 

文件 路 径 通常 与 网 站 的 目录 结构 相对 应 。 所 以 ， 在 上 例 中 应 该 可 以 在 一 个 名 为 books 的 目录 中 
找到 页 面 文 件 BeginningHTML html。 

并 非 只 有 网 页 才 拥有 自己 的 URL。 网 络 中 的 任何 文件 ， 包 括 每 张 图 片 ， 都 有 自己 的 URL。 所 
以 ，URL 中 的 文件 名 也 可 能 是 一 张 图 片 ， 而 并 非 HTML 页 面 。 

在 链接 网 站 内 部 的 页 面 时 ， 无 须 提供 URL 的 全 部 三 个 部 分 ， 可 以 仅 提供 文件 路 径 与 文件 名 。 


5. 绝对 URL 地 址 与 相对 URL 地 址 


(D“ 绝 对 URL 地 址 ”中 包含 访问 互联 网 上 某 一 特定 文件 所 需要 的 所 有 要 素 。 在 浏览 器 中 访问 
某 一 页 面 时 ， 在 地 址 栏 中 需要 输入 的 正 是 绝对 URL 地 址 。 例 如 ， 在 前 面 介绍 过 的 虚构 的 新 闻 网 站 
中 ， 如 果 要 访问 它 的 电影 页 面 ， 就 需要 输入 如 下 URL 地 址 。 参 考 图 3-15 将 有 助 于 理解 文件 路 径 与 
目录 结构 的 对 应 关系 。 

http://www.exampleNewsSite.conyEntertainment/Film/index html 


由 于 绝对 URL 地 址 很 容易 变 得 很 长 ， 而 每 个 Web 页 面 也 很 可 能 包含 很 多 链接 ， 因 此 当 链 接 网 
站 内 部 页 面 时 ， 可 以 使 用 一 种 缩 略 形式 : 相对 URL 地 址 。 

(2)“ 相 对 URL 地 址 ”指定 被 访问 资源 与 当前 页 面 的 相对 位 置 。 在 本 章 之 前 的 示例 中 ， 访 问 同 
一 目录 下 的 其 他 页 面 时 所 使 用 的 就 是 相对 URL 地 址 。 还 可 以 使 用 相对 URL 地 址 访问 不 同 目录 下 的 
文件 。 例 如 ， 在 虚构 的 新 闻 网 站 中 ， 娱 乐 版 块 的 首页 在 如 下 位 置 : 

http://www.exampleNewsSite.com/Entertainment/index.html 

要 在 索引 页 面 中 加 入 每 一 个 子 版 块 的 链接 : Film、TV、Arts 以 及 Music。 这 一 次 不 再 对 每 一 页 
面 使 用 完整 的 URL 地 址 ， 而 是 选择 使 用 相对 URL 地 址 ， 例 如 : 

Film/index.html 

TV/index.html 

Arts/index .html 

Music/index.html 

这 样 做 相 比 使 用 如 下 绝对 URL 地 址 形式 要 快捷 很 多 : 

http://www.exampleNewsSite.com/Entertainment/Film/index.html 

http://www.exampleNewsSite.com/Entertainment/TV/index.html 

http://www.exampleNewsSite.com/Entertainment/Arts/index.html 

http://www.exampleNewsSite.com/Entertainment/Music/index.html 


注意 : 
Web 服务 器 通常 会 有 “默认 文档 ”的 概念 。 这 意味 着 对 目录 的 任何 访问 请 求 会 被 传递 给 默认 页 
面 。 在 很 多 服务 器 中 ， 该 页 面 通常 是 index html， 这 使 得 长 文章 列表 更 易于 使 用 。 


(3) 相对 URL 地 址 的 类 型 


同一 目录 : 当 需 要 链接 到 或 包含 来 自 同一 目录 下 的 某 一 资源 时 ， 可 仅 使 用 文件 名 进行 引用 。 例 
如 从 首页 (index.htmD) 中 链接 到 Contact Us(contactUs htmD) 页 面 ， 可 以 使 用 如 下 方式 : 
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contactUs.html 
子 目录 : 图 3-15 中 的 Film、TV、Arts 以 及 Music 目录 都 是 Entertainment 目录 的 子 目录 。 如 果 


在 Entertainment 目录 中 建立 一 个 页 面 ， 则 可 以 在 其 中 包含 如 下 指向 各 子 目录 索引 页 面 的 链接 ; 


[EE 


必须 包含 子 目录 名 ， 紧 跟 一 个 正 斜 线 ， 然 后 是 需要 链接 到 的 页 面 的 名 称 。 
每 多 一 级 子 目 录 ， 就 在 URL 中 添加 该 子 目 录 名 以 及 正 斜 线 。 所 以 ， 如 果 从 网 站 根 目录 中 的 页 


面 创建 指向 相同 页 面 的 链接 ， 则 应 使 用 如 下 相对 URL 地 址 形式 : 


Entertainment/Film/index.html 
Entertainment/TV/index html 
Entertainment/Arts/index.html 
己 JMusic/index html 


父 目 录 : 如 果 需 要 从 一 个 目录 中 创建 指向 其 父 目录 ( 即 该 目录 所 在 目录 ) 的 链接 , 则 可 以 使 用 “../” 


符号 (两 个 句点 加 一 个 正 斜 线 )。 例 如 ， 从 Music 目录 中 的 页 面 指向 Entertainment 目录 中 的 另 一 个 页 


， 可 以 使 用 相对 路 径 来 表达 : 


-indexhtml 
而 如 果 想 从 Music 目录 中 指向 根 目录 ， 则 可 以 重复 “./” 符 号 ， 例 如 : 

-index.html 

每 一 次 重复 “./” 符 号 ， 就 多 向 上 返回 一 级 目录 。 

从 根 目录 出 发 : 可 以 指定 文件 相对 于 网 站 根 目录 的 位 置 。 所 以 ， 如 果 希 望 从 站 点 中 的 任意 页 面 


链接 到 contactUs.html 页 面 ， 则 可 以 使 用 以 正 斜 线 开 头 的 路 径 形式 。 例 如 ， 如 果 Contact Us 页 面 位 于 
根 目 录 ， 则 需要 输入 : 


/contactUs html 

再 如 ， 如 果 想 从 网 站 中 的 任意 页 面 链接 到 Music 版 块 的 索引 页 面 ， 则 可 以 使 用 如 下 形式 : 
/Entertainment/Music/index.html 

起 始 位 置 的 正 斜 线 代表 根 目录 ， 之 后 的 路 径 便 是 从 根 目录 开始 的 相对 位 置 。 

(4) <base> 元 素 

当 浏 览 器 遇 到 相对 URL 地 址 时 ， 实 际 上 会 将 相对 URL 地 址 转换 为 完整 的 绝对 URL 地 址 。 而 


<base> 元 素 允 许 为 一 个 页 面 指定 一 个 基础 URL 地 址 。 通 过 这 种 设置 ， 浏 览 器 会 以 在 相对 URL 地 址 
前 加 上 基础 URL 地 址 的 方式 得 到 完整 的 绝对 URL 地 址 。 


基础 URL 地 址 的 值 可 以 在 <base> 元 素 的 href 特性 中 进行 设置 。 例 如 ， 如 果 需 要 指定 


http://www.exampleSite2.comy/ 作 为 基础 URL 地 址 ， 则 可 进行 如 下 设置 : 


<base href="http://www.exampleSite2.com/" /> 
这 种 情况 下 ， 如 果 页 面 中 有 如 下 相对 URL 地 址 : 


Entertainment/Arts/index .html 
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则 最 终 浏览 器 会 请 求 如 下 页 面 : 
http://www.exampleSite2.com/Entertainment/Arts/index html 

除 href 特性 外 ，<base> 元 素 可 带 有 的 唯一 其 他 特性 为 id 特性 。 
6. 使 用 <a> 元 素 创建 页 内 链接 


下 面 将 介绍 如 何 使 用 <a> 元 素 创建 指向 页 面 特定 部 分 的 链接 。 

在 HIML 中 ， 链 接 的 起 点 和 终点 都 叫 作 “ 锚 ”(anchoD。 任 何在 页 面 上 看 到 并 可 以 单 击 的 链接 ， 
都 是 “ 源 锚 ”(source anchor), 使 用 <a> 元 素 创建 。 还 可 以 使 用 <a> 元 素 在 页 面 中 的 不 同位 置 设置 标记 ， 
称 为 “目的 锚 ”(destination anchor)， 从 而 直接 链接 至 页 面 中 的 该 位 置 。 

(1) 使 用 href 特性 创建 源 锚 

“ 源 锚 ” 是 一 种 可 供用 户 单 击 并 希望 被 跳 转 至 其 他 位 置 的 东西 。 开 始 标签 <a> 和 结束 标签 </a> 之 
间 的 全 部 文本 内 容 将 组 成 链接 中 供用 户 单 击 的 部 分 ， 而 用 户 将 被 跳 转 到 的 URL 地 址 则 在 href 特性 
中 指定 。 

例如 ， 当 单 击 文字 Wrox Web site( 可 以 看 到 位 于 <a> 元 素 内 ) 时 ， 链 接 会 跳 转 至 http://www. 
WIOX.COM/: 

Why not visit the <a href="http://www.wrox.com/">Wrox Web site</a> tofind out about some of our other books? 

如 果 下 例 中 的 链接 位 于 前 面 新 闻 网 站 的 首页 ， 则 单 击 后 会 跳 转 至 网 站 中 Film 版 块 的 首页 : 

You can see more films in the <a hre 全 "Entertainment/Filnmy/index.html">filmsection</a> 


默认 情况 下 ,该 链接 的 效果 如 图 3-17 中 所 示 ， 即 带 下 画 


线 的 蓝 色 文本 。 
(2) 使 用 name 与 过 特性 创建 目的 错 (链接 至 页 面 内 的 特 | sse? 

定位 置 ) 
如 果 网 页 很 长 ， 就 可 能 需要 设置 到 页 面 内 某 些 特 定位 置 

的 链接 , 以 使 用 户 避 免 为 寻找 相关 内 容 而 上 下 滚动 页 面 。“ 目 POP 


的 锚 ” 使 页 面 作者 能 够 标记 出 页 面 中 可 由 源 锚 指向 的 特定 点 。 

网 络 中 比较 常见 的 链接 到 页 面 中 特定 部 分 的 一 些 例子 包括 : 

@ ”位 于 长 页 面 底部 的 返回 顶端 (Back to Top) 链 接 

e 将 用 户 跳 转 至 页 面 中 各 相关 小 节 的 目录 列表 

e 行文 中 的 脚注 以 及 定义 链接 等 

目的 锚 同 样 使 用 <a> 元 素 创建 ， 但 在 作为 目的 锚 使 用 时 ， 需 要 使 用 id 特性 而 非 href 特性 。name 
和 id 特性 是 两 个 通用 特性 ， 绝 大 多 数 元 素 都 可 以 包含 二 者 。 目 前 id 特性 被 推荐 用 于 创建 目的 锚 ， 
但 因为 id 特性 直到 HTML 4.01 才 被 引入 ， 所 以 在 之 前 版 本 中 name 特性 被 用 来 完成 同样 的 功能 。 

在 创建 指向 页 面 中 各 个 小 节 的 链接 (使 用 源 锚 ) 之 前 ， 必 须 先 添加 目的 锚 。 从 下 例 中 能 够 看 到 ， 
在 <h2> 次 级 标题 元 素 中 有 一 个 过 特性 ， 它 的 值 唯一 标识 了 所 在 的 每 个 小 节 。 请 记 住 ， 在 同一 页 面 中 
不 能 存在 两 个 值 完 全 相同 的 id 特性 。 
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本 RE a h 


<h2id-"Examples">Examples<h2> 


在 创建 完 目的 锚 之 后 ， 可 以 开始 创建 链接 至 各 小 节 的 源 锚 。 为 链接 至 特定 的 小 节 ， 源 锚 的 href 
特性 值 需要 与 对 应 的 目的 元 素 的 这 特性 值 相 同 ， 并 且 在 值 的 最 前 面 加 上 井 号 (办 。 


<uP 
<li><a href="#URL">URLs</a></li> 
<li><a href="#SourceAnchors">Source Anchors</a></li> 
<li><a href="#Examples">Examples</a></li> 
< 
<av> 


如 图 3-18 所 示 ， 可 以 看 到 页 面 中 包含 多 种 指向 各 小 节 链接 的 方式 。 从 图 3-19 中 则 能 够 看 到 : 
当 用 户 单 击 第 二 个 链接 后 ， 被 直接 跳 转 到 页 面 中 的 对 应 小 节 。 


图 3-18 页 面 中 包含 多 种 指向 各 小 节 链接 的 方式 


图 3-19 跳 转 到 页 面 中 的 对 应 小 节 

如 果 和 希望 从 其 他 网 站 链接 至 本 页 中 的 某 个 特定 部 分 (比如 Source Anchors 小 节 )， 则 需要 在 链接 

中 补充 页 面 的 完整 URL 信息 ， 并 跟 上 井 号 以 及 该 小 节 的 id 特性 值 ， 例 如 : 
http://www.example.com/HTML/links.htmi#SourceAnchors 


注意 : 
name 或 id 特性 的 值 在 页 面 中 应 该 是 唯一 的 。 源 锚 应 该 使 用 与 对 应 的 目的 锚 相 同 的 大 小 写 组 合 
形式 。 


7. <a> 元 素 的 其 他 特性 
(1) accesskey 特性 


accesskey 特性 创建 可 以 通过 键盘 按键 激活 链接 的 快捷 方式 。 例如 ,如 果 将 值 “t” 赋 给 accesskey 
特性 ， 当 用 户 按 下 工 键 的 同时 按 下 Alt 键 或 Ctrl 键 时 ， 链 接 就 会 被 激活 。 


在 一 些 浏览 器 中 ， 当 链接 被 激活 后 ， 浏 览 器 会 立即 跳 转 到 链接 指向 的 位 置 ， 而 在 另 一 些 浏览 器 


75 上 


HTML5+CSS3 网 页 设计 己 倒 教程 


中 ， 链 接 仅 会 被 高 亮 显 示 。 用 户 必须 按 回 车 键 ， 链 接 才 能 发 生 实际 跳 转 。 

accesskey 特性 应 该 在 源 锚 中 进行 指定 。 例 如 ， 如 果 需 要 创建 一 个 链接 ， 当 用 户 按 下 IT 键 时 ( 同 
时 按 下 Alt 或 Ctrl 键 ) 页 面 会 跳 转 至 顶端 ， 则 可 以 按 如 下 方式 使 用 accesskey 特性 : 

<a id="bottom" accesskey="t">Back to top</a> 

(2) hreflang 特性 

hreflang 特性 指定 链接 到 的 目标 页 面 所 使 用 的 语言 。 该 特性 用 于 链接 的 目标 页 面 与 当前 页 面 语 
言 不 同 的 情况 。 该 特性 的 值 是 一 个 双 字 符 语 言 代码 ， 例 如 : 

<a href="http://www.amazon.co.jp/" hreflang="JA">Amazon Japan</a> 

(3) rel 特性 

在 源 锚 中 使 用 rel 特性 可 以 指明 当前 文档 与 href 特性 所 指向 资源 间 的 关系 。 主 流 浏览 器 目前 对 
该 特性 尚 无 任何 实际 使 用 。 尽管 如 此 , 一 些 自动 化 的 应 用 程序 中 仍 有 可 能 编写 了 使 用 此 信息 的 功能 。 
例如 ， 下 例 中 的 链接 使 用 rel 特性 指明 目标 是 文档 中 所 用 术语 的 词汇 表 : 
For more information, please read the <a href="#glossary"rel="glossary">glossary</a> 
(4) tabindex 特性 


可 以 获得 焦点 。 在 页 面 加 载 之 后 ， 如 果 用 户 按 下 键盘 上 的 Tab 键 ， 浏 览 器 就 会 在 页 面 中 用 户 可 以 交 
i。 页 面 中 可 以 获得 焦点 的 部 分 包括 链接 以 及 表单 的 某 些 部 分 (例如 文本 输入 框 
得 焦点 之 后 ， 如 果 用 户 按 下 键盘 上 的 Enter 键 ， 链 接 就 会 被 激活 。 

(5) target 特性 

默认 情况 下 ， 对 于 由 <a> 元 素 创建 的 链接 ， 浏 览 器 会 在 同一 窗口 内 打开 所 要 链接 的 文档 。 如 果 
需要 在 新 的 浏览 器 窗口 中 打开 链接 ， 可 以 通过 给 target 特性 赋值 为 “ blank” 来 实现 。 

<a href="Page2 html" target="_blank">Page 2</a> 

(6) title 特性 

对 于 任何 包含 图 片 的 链接 都 应 该 使 用 title 特性 。 同 时 ， 在 多 数 浏览 器 中 它 还 能 够 帮助 以 文本 提 
示 标 签 的 形式 向 访问 者 提供 附加 信息 ; 而 在 语音 浏览 器 中 ， 则 可 以 为 视力 受 损 者 提供 语音 提示 。 

(7) type 特性 

type 特性 用 于 指定 链接 的 MIME 类 型 。MIME 类 型 类 似 于 文件 扩展 名 ， 但 前 者 在 不 同 操作 系统 
中 被 更 广泛 接受 。 例 如 ，HIML 页 面 的 MIME 类 型 可 能 是 testhtml， 而 了 PEG 图 片 的 MIME 类 型 则 
可 能 是 img/ipeg。 

下 例 中 ，type 特性 被 用 于 指定 该 链接 所 指向 的 资源 是 一 个 HTML 文档 : 


<a href="index html" type="text/html">Index</a> 


8. 高 级 电子 邮件 地 址 链接 


创建 一 个 能 够 打开 用 户 的 默认 电子 邮件 编辑 程序 的 链接 ， 并 自动 将 指定 的 一 个 电子 邮件 地 址 设 
置 为 收 件 人 ， 这 可 以 通过 如 下 方式 实现 : 


<a href="mailto:info@example.org">info@example.org</a> 
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还 可 以 指定 邮件 消息 的 其 他 部 分 ， 比 如 主题 、 邮 件 主体 以 及 需要 抄 送 及 秘密 抄 送 的 邮件 地 址 。 
想 要 控制 电子 邮件 的 其 他 属性 ， 需 要 在 邮件 地 址 后 附加 一 个 问号 并 在 之 后 以 “名 称 / 值 ”对 的 形 


式 指定 额外 属性 。 名 称 与 值 之 间 使 用 等 号 分 隔 。 


9. 在 页 面 中 创建 链接 的 实例 


创建 一 个 长 页 面 ， 其 中 包含 指向 页 面 中 不 同 部 分 的 各 种 链接 。 
例 3-6: 为 Example Cafe 创建 菜单 页 面 。 现 在 使 用 文本 编辑 器 或 网 页 编写 工具 打开 示例 应 用 中 


的 menu html 页 面 : 


(1) 起 始 状态 页 面 应 如 下 所 示 : 


<!doctype html> 
<html> 
<head> 
<title>Example Cafe - community cafe in Newquay, Comwall, UK</title> 
</head> 
<body> 
<hl>EXAMPLE CAFE<hl> 
<p>Welcome to Example cafe. We will be developing this site throughout 
the book.</p> 
<h2>Menu<hh2> 
<p>The menu will go here.</p> 
<body> 
</html> 


(2) 在 <hl> 元 素 之 后 ， 使 用 包含 导航 链接 的 <nav> 元 素 蔡 换 第 一 段 ， 在 页 面 中 创建 导航 区 域 。 


<nav> 
<ahref-"index html">HOME</a> 
MENU 
<a href="recipes html">RECIPES</a> 
<a href="opening html">OPENING</a> 
<a href="contact html">CONTACT</a> 
/nav> 


(3) 在 导航 栏 之 下 ， 添 加 在 售 不 同 菜品 的 标题 行 。 
(4) 每 个 标题 行 都 应 该 有 对 应 的 目的 锚 ， 从 而 使 你 在 页 面 中 可 以 直接 链接 到 该 位 置 。 此 外 ， 标 


题 元 素 的 id 特性 应 该 使 用 能 够 描述 所 在 小 节 的 字符 串 。 主 标题 同样 需要 目的 锚 ， 以 供 Back to Top 
链接 使 用 。 还 需要 记 住 的 是 ， 目 的 锚 内 需要 内 容 ， 此 处 以 对 应 标题 中 的 文本 作为 内 容 。 


<hl id-"top">Example Cafe Menu</h1> 
<h2 id="starters">Starters</h2> 

<h2 id="mains">Main Courses</h2> 
<h2 id="desserts">Desserts</h2> 


(5) 在 Example Cafe Menu 标题 之 下 , 添加 对 应 每 道 菜品 目的 锚 的 链接 .所 有 链接 应 放 入 一 个 <p> 


元 素 内 : 


<p><a href="#starters">Starters</a> | <a href="#mains">Main Courses</a> | <ahref="#desserts">Desserts</a></p> 


(6) 在 页 面 底部 ， 有 一 段 注释 用 于 声明 任何 标记 有 字母 v 的 菜品 都 适 于 素食 者 食用 。 相 应 的 素 
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食 菜品 旁 会 有 一 个 指向 该 注释 的 链接 ， 所 以 此 处 也 需要 设置 一 个 目的 锚 : 


<p><small><a id="vegetarian">Items marked with a (v) are suitable for vegetarians.</a></small></p> 
(7) 可 以 使 用 无 序 事项 列表 添加 菜单 项 。 素 食 菜品 还 会 有 一 个 指向 页 尾 相关 描述 的 链接 。 另 外 ， 


在 每 一 个 列表 后 都 要 记得 加 上 Back to Top 链接 。 


<h2><a id="starters">Starters</a></h2> 
<ul> 
<li>Chestnut and Mushroom Goujons (<a href="#vegetarian">v</a>)</li> 
<li>Goat Cheese Salad (<a href="#vegetarian">v</a>)</li> 
<li>Honey Soy Chicken Kebabs</li> 
<li>Seafood Salad</li> 
<u> 
<p><small><a href-="#top">Back to top</a></small></p> 


<u> 
<li>Spinach and Ricotta Roulade (<a href="#vegetarian">v</a>)</li> 
<li>Beef Toumados with Mustard and Dil Sauce</li> 
<li>Roast Chicken Salad</li> 
<li>Icelandic Cod with Parsley Sauce</li> 
<li> Mushroom Wellington (<a href="#vegetarian">v</a>)</li> 
<hl> EXAMPLE CAFE 
<p><small><a href="#top">Back to top</a></small></p> HOME MENU RECIPES OPENING CONIACI 
Example Cafe Menu 


Starters | Main Courses | Desserts 


<h2><a id="desserts">Desserts</a></h2> 

<u> 
<li>Lemon Sorbet (<a href="#vegetarian">v</a>)</li> 
<li>Chocolate Mud Pie (<a href="#vegetarian">v</a>)</li> 
<li>Pecan Pie (<a href-"#vegetarian">v</a>)</li> 
<li>Selection of Fine Cheeses from Around the World</li> 后 

<ml> Main courses 


。 Spinach and Ricota Roulade &) 
<p><small><a href="#top">Back to top</a></small></p> Beef Yournados wi Mustard and Dilsauce 


» Roast Chicken Salad 


(8) 以 文件 名 menu.html 保存 文件 , 然后 在 浏览 器 » Meoom walnuton CY 


Starters 


中 打开 查看 ， 效 果 如 图 3-20 所 示 。 5 


Desserts 


过 特性 的 作用 就 像 路 标 ， 标 识 出 页 面 中 特定 区 域 


«Lemon sorbet 0) 


的 位 置 。 当 用 户 单 击 一 个 页 内 链接 ， 或 者 通过 一 个 带 Re 


UY 
» Selection of Fine Cheeses from Around the World 


有 间 号 参数 的 URL( 例 如 menuhtmlistarters) 访 问 某 个 。 | 
页 面 时 ，Web 浏览 器 会 将 该 页 面 深 动 至 所 需要 的 指定 i 
区 域 。 


描述 文本 级 语义 


本 节 介 绍 可 用 于 文本 标记 的 元 素 。 
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3.3.1 描述 文本 级 语义 的 元 素 


本 节 将 介绍 多 个 元 素 ， 这 些 元 素 有 助 于 更 加 精确 地 描述 文本 。 首 先是 用 于 描述 文本 重要 性 或 强 
调 文本 的 元 素 ， 之 后 是 用 于 描述 时 间 等 结构 化 数据 的 元 素 ， 以 及 用 于 表现 程序 代码 的 元 素 。 


1. <span> 元 素 


<span> 元 素 是 <div> 元 素 的 一 位 表亲 。 它 同样 是 一 个 没有 语义 值 的 通用 元 素 , 主要 用 于 组 织 行内 
元 素 。 下 例 中 的 <span> 元 素 用 于 指出 对 于 一 位 “发 明 者 ”(inventor) 的 描述 内 容 。 它 包含 一 个 <strong> 
元 素 以 及 一 些 文本 内 容 。 
<div class="footnotes"> 
<h2>Footnotes</h2> 
<p><span class="inventor><strong>1</strong> The World Wide Web was 
invented by Tim Bemers-Lee</span></p> 
<p><strong>2</strong> The W3C is the World Wide Web Consortium 
which maintains many Web standards</p> 
</div> 
就 其 自身 而 言 ，<span> 元 素 对 文档 的 视觉 效果 没有 任何 影响 ， 但 它 却 通过 将 相关 元 素 组 织 到 一 
起 ， 给 内 容 标记 增加 了 更 多 语义 。 它 在 使 用 CSS 规则 向 这 些 元 素 附加 特定 的 样式 时 尤为 有 用 。 
2. <em> 元 素 


<em> 元 素 的 内 容 是 文档 中 有 意 强调 的 重点 ,其 内 容 通 常会 使 用 斜体 文本 显示 。 有 意 强调 的 类 型 
类 似 于 下 面 句 子 中 的 “must”( 必 须 ) 一 词 : 

<p>You <em>must</em> remember to close elements in HTML.</p> 

应 该 只 有 在 需要 为 某 个 词 添加 强调 语气 时 使 用 <em> 元 素 ， 而 不 只 为 得 到 斜体 字 效果 而 使 用 。 如 
果 仅 为 显示 风格 原因 需要 斜体 效果 一 一 而 非 需 要 添加 强调 语气 一 一 则 可 以 要 么 使 用 < 户 元 素 , 要 么 最 
好 使 用 CSS。 

3. <strong> 元 素 


<strong> 元 素 用 于 有 意 强烈 着 重 的 内 容 ， 程 度 强 于 <em> 元 素 。 与 <em> 元 素 相同 ，<strong> 元 素 
应 仅 用 于 文档 中 需要 强烈 着 重 的 部 分 。 多 数 视觉 浏览 器 以 粗 体 显示 强烈 着 重 的 内 容 。 

<p><em>Always</em> look at buming magnesium through protective colored 

glass as it <strong>can cause blindness</strong>.</p> 

图 3-21 展示 了 Firefox 浏览 器 中 <em> 元 素 与 <strong> 元 素 的 不 同 效果 。 

这 些 元 素 的 展现 效果 ， 无 论 斜 体 还 是 粗 体 ， 本 身 并 不 重要 。 这 些 元 素 应 当 用 于 词句 的 着 重 ， 并 
以 此 增强 文档 的 语义 , 而 非 用 于 控制 视觉 效果 。 使 用 CSS 修改 这 些 元 素 的 视觉 呈现 非常 简单 一 — 例 
如 可 以 将 <em> 元 素 的 内 容 背景 设置 为 黄色 ， 并 将 斜体 变 为 粗 体 ， 以 达到 高 亮 的 效果 。 


The following sentence uses a <dfi> element for the important term HTML 


This book teaches you how mark up your documents for the web using HTMI. 


图 3-21 Firefox 浏览 器 中 <em> 元 素 与 <strong> 元 素 的 不 同 效果 


79 8 


HTML5+CSS3 网 页 设计 己 倒 教程 


4. <b> 元 素 


<b> 元 素 中 的 任何 内 容 都 会 以 粗 体 显示 ， 如 下 例 中 的 bold 这 个 词 : 
The following word uses a <b>bold</b> typeface. 


5. <i> 元 素 

<i> 元 素 的 内 容 会 以 斜体 显示 ， 如 下 例 中 的 italic 这 个 词 : 

The following word uses an <i>italic</i> typeface. 

浏览 器 未 必 使 用 对 应 字体 的 斜体 版 本 显示 其 内 容 。 大 多 数 浏览 器 会 通过 将 文字 线性 倾斜 的 算法 
来 模拟 斜体 效果 。 

6. <strong> 和 <b> 以 及 <em> 和 <i> 

你 可 能 很 好 奇 为 什么 不 同 元 素 在 浏览 器 中 显示 时 会 以 同样 的 方式 呈现 ， 以 及 应 该 选择 哪 一 个 。 
总 体 上 ， 因 为 强烈 语气 与 内 容 强调 未 必 一 定 与 打印 方式 相关 联 ， 所 以 更 推荐 使 用 <strong> 和 <em> 而 
不 是 <b> 和 <i>。 这 意味 着 <strong> 和 <em> 更 易于 在 屏幕 阅读 器 或 者 其 他 不 依赖 于 特定 风格 类 型 的 呈 
现 手 段 中 使 用 。 

7. <small> 元 素 

<small> 元 素 用 于 打印 “条 纹 细则 "(fine printb)。 免 责 声明 、 和 警告 以 及 版 权 信息 等 都 是 典型 的 <small> 
元 素 用 例 。 

<small id="copyright">© Rob Larsen 2012</small> 

8. <cite> 元 素 

在 引用 文本 时 ， 可 以 通过 将 来 源 信息 置 于 开始 标签 <cite> 与 结束 标签 </cite> 之 间 对 其 进行 指定 。 
类 似 于 纸 质 出 版 物 ，<cite> 元 素 中 的 来 源 信息 默认 会 以 斜体 泻 染 。 

This chapter is taken from <cite>Beginning Web Development</cite>. 

如 果 是 引用 在 线 资源 ， 应 该 将 <cite> 元 素 置 于 <a> 元 素 中 。 

9. <q> 元 素 

当 在 语句 内 想 要 添加 引用 时 可 以 使 用 <q> 元 素 : 

<p>As Dylan Thomas said, <q>Somebody’s boring me. I think its me</q>.</p> 

<q> 元 素 中 的 文本 应 该 以 双 引 号 开始 及 结束 。Firefox 浏览 器 会 自动 插入 引号 , 而 正 系列 中 直到 
正 8 才 开 始 支 持 <q> 元 素 。 因 此 ， 如 果 页 面 中 有 引用 内 容 ， 需 要 注意 正 7 以 及 更 早 版 本 并 不 会 自动 显 
示 引 号 。 如 果 需 要 这 些 浏览 器 的 支持 ， 也 可 以 使 用 CSS 解决 。 

<q> 元 素 同样 可 以 带 有 cite 特性 ， 它 的 值 应 该 是 指向 引用 源 的 URL 地 址 。 

10. <dfn> 元 素 

<dfn> 元 素 用 于 指明 文档 中 引入 的 特殊 术语 。<dfn> 元 素 的 典型 用 法 是 只 在 第 一 次 引入 某 关键 术 
语 时 使 用 。 多 数 现代 浏览 器 使 用 斜体 泻 染 <dfn> 元 素 中 的 内 容 。 例 如 ， 可 以 指定 下 面 句 子 中 的 术语 
“HTML” 很 重要 ， 并 应 该 进行 相应 的 标记 。 图 3-22 展示 了 <dfn> 元 素 的 使 用 效果 。 
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This book teaches you how to mark up your documents forthe Web using 
<dfn>HTML</dfn>. 


The folowing seatence uses a <din> elemeat for the Ieperiant term HIMT 


This book teaches you how mark up your documents for the web using FTMI. 


图 3-22 <dfn> 元 素 的 使 用 效果 


11. <abbr> 元 素 


可 以 通过 在 <abbr> 开 始 标签 与 </abbr> 结 束 标签 之 间 放 置 缩写 信息 ， 以 在 使 用 缩 略 形式 或 首 字母 
缩写 时 进行 指定 。 

可 以 同时 使 用 tite 特性 , 并 为 其 赋予 缩写 形式 的 完整 含义 例如, 要 指定 “HTML ”为 “HyperText 
Markup Language ”的 缩写 形式 ， 可 以 使 用 <abbr> 元 素 进行 如 下 标记 : 

This book teaches you how to mark up your documents for the Web using <dfn> 

<abbr title="HyperText Markup Language">HTML</abbr></dfn> 

要 对 英语 之 外 的 语言 进行 缩写 标记 ， 还 可 以 使 用 lang 特性 指定 所 用 的 语言 。 

12. <time> 元 素 


可 以 使 用 <time> 元 素 以 及 与 之 关联 的 datetime 特性 ， 标 记 以 不 同形 式 展示 时 间 的 文本 。 这 种 用 
法 包括 <time> 元 素 以 及 可 选 的 datetime 特性 。<time> 元 素 的 内 容 用 于 在 浏览 器 中 实际 显示 ， 而 
datetime 特性 则 使 用 计算 机 可 识别 的 格式 记录 相同 的 日 期 和 时 间 。 若 省 略 datetime 特性 ， 则 <time> 
元 素 的 内 容 必须 符合 datetime 的 有 效 格式 ， 如 表 3-4 所 示 。 


表 3-4 datetime 特性 的 有 效 格式 


格 式 示例 

有 效 的 “月 ”日 期 字符 串 <time>2018-10</time> 

有 效 的 日 期 字符 串 <time>2018-10-1</time> 

有 效 的 “月 日 ”日 期 字符 串 <time>10-1</time> 

有 效 的 时 间 字符 串 <time>11:11</time> 

有 效 的 本 地 日 期 和 时 间 字 符 串 <time>2018-10-1T11:11</time> 

有 效 的 时 区 偏 移 字符 串 所 
<time>-0800</time> 
<time>2018-10-1T14:54+0000</time> 

有 效 的 全 球 日 期 和 时 间 字 符 串 <time>2018-10-1T06:54-0800</time> 
<time>2018-10-1T06:54:39-0800</time> 

有 效 的 周 字符 串 <time>2018-W1</time> 

有 效 的 非 负 整数 年 份 字符 串 <time>2018</time> 

有 效 的 持续 时 间 字 符 串 <time>2h 3m 38s5</time> 


使 用 datetime 特性 使 得 能 以 友好 的 格式 向 用 户 展现 日 期 时 间 ， 同 时 又 可 以 保留 计算 机 可 识别 的 
格式 供用 户 加 以 利用 。 下 面 是 一 个 以 人 类 可 读 形式 展现 有 效 日 期 字符 串 的 例子 : 
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<time datetime="2018-10-1">New Years Day 2018</time> 

<time datetime="2004-10-27T20:25">On a late October night</time>. the 
Boston Red Sox played in the decisive game four of the 2004 World Series 
The world marathon record now sits at <time datetime="2h 3m 38s"> 
just over two hours</time> 


13. <code> 元 素 


如 果 页 面 中 包含 程序 代码 ， 那 么 下 面 将 要 介绍 的 4 个 元 素 将 在 这 方面 非常 有 帮助 。 必 须 将 希望 
在 网 页 上 显示 的 代码 放置 在 <code> 元 素 中 。 通 常 <code> 元 素 中 的 内 容 会 以 等 宽 字 体 显 示 ， 与 大 多 数 
编程 类 书籍 中 使 用 的 方式 类 似 。 


注意 : 

尝试 在 Web 页 面 上 显示 代码 时 (例如 ， 创 建 一 个 介绍 网 页 编程 的 页 面 )， 如 果 需 要 包含 尖 括 号 ， 
不 能 在 内 容 中 直接 使 用 开 闭 拓 括 号 ， 因 为 浏览 器 会 将 它们 错误 理解 为 HTML 标记。 正确 的 做 法 是 使 
用 R&It; 取 代 左 尖 括 号 (<)， 使 用 &gt; 取 代 右 尖 括 号 (>)。 这 类 替代 字符 的 集合 被 称 作 “ 转 义 码 ”(escape 
code)。 

下 面 展示 了 在 <code> 元 素 内 展现 HIML 中 <hl> 元 素 及 其 内 容 的 方式 : 

<p><code>&lthl&gtThis is a primary heading&clt/hl&gt</code></p> 

图 3-23 展示 了 浏览 器 中 的 显示 效果 。 


The <code> Element For Adding Code to Your Web Pages 


The following line appears inside a <code> element 


<hi>This is a primary heading</h1> 


图 3-23 在 <code> 元 素 内 展现 HTML 中 的 <hl> 元 素 及 其 内 容 
<code> 元 素 还 经 常 与 <pre> 元 素 一 同 使 用 ， 从 而 保持 代码 格式 。 
14. <figure> 及 <figcaption> 元 素 
可 以 使 用 <figure> 元 素 以 及 与 之 关联 的 <figcaption> 元 素 对 图 表 或 插图 进行 标记 和 声明 ， 以 指明 
这 些 图 表 或 插图 可 能 在 文档 中 被 引用 ， 但 并 非 文 档 主体 的 一 部 分 。 下 面 使 用 一 小 段 <code> 元 素 展示 
如 何 利用 <figure> 元 素 展现 本 书 中 的 一 段 代 码 。 


<figure id-"14"> 
<figcaption> using the code element to represent an hl element and its content in HTML</figcaption> 
<code>&lthl&gtThisisa primary heading&lt/hl&gt</code> 
</figure> 


15. <var> 元 素 

<var> 元 素 是 另 一 个 为 帮助 程序 员 而 添加 的 元 素 。 通 常 将 它 与 <pre> 和 <code> 元 素 共同 使 用 ， 用 
来 指明 其 内 容 是 一 个 可 由 用 户 提供 的 变量 。 

<p><code>consolelog( "<var>user-name</var>" )</code></p> 


和 :> 


第 3 章 创建 HTML5 文档 


<var> 元 素 中 内 容 的 典型 形式 是 斜体 。 

16. <samp> 元 素 

<samp> 元 素 用 于 指明 来 自 程序 、 脚 本 等 的 示例 输出 。 该 元 素 与 前 述 元 素 类 似 ， 都 用 于 记录 编程 
的 相关 内 容 ， 例 如 : 


<p>The following line uses the &ltsamp&gt elementto indicate the output from a script or program.</p> 
<p><samp>This is the output from our test script.</samp></p> 


这 类 内 容 倾 向 于 以 等 宽 字 体 显示 ， 如 图 3-24 所 示 。 


The <samp> Element for Sample Program Output 


The folowing line uses he <samp> element to mdicate the cutpt from a script cr prcgram 


Thia ia the output Erom our test scrips. 


图 3-24 ”应 用 <samp> 元 素 的 显示 效果 


17. <kbd> 元 素 

如 果 在 描述 有 关 计 算 机 的 话题 时 ， 希 望 读者 输入 一 些 文本 ， 则 可 以 使 用 <kbd> 元 素 指明 需要 输 
入 的 内 容 ， 如 下 所 示 : 

<p>To force quit an application in Windows, hold down the <kbd>ctri</kbd>, 

<kbd>alt</kbd> and <kbd>delete</kbd> keys together.</p> 

<kbd> 元 素 的 内 容 通常 以 等 宽 字体 显 示 ， 这 一 点 与 <code> 元 素 的 内 容 很 类 似 。 图 3-25 展示 了 浏 
览 器 中 的 效果 。 


The <kbd> Element for Keyboard Instructions 


To force qni an appli-ation in Windows. hold down the rr1, alr and delere keys iogether 


图 3-25 ”应 用 <kbd> 元 素 的 显示 效果 
18. <sup> 元 素 


<sup> 元 素 的 内 容 会 以 上 角 标 形式 显示 。 显 示 位 置 比 普通 字符 高 出 半 个 字符 的 高 度 ， 并 且 经 常 
比 周围 文本 的 字体 小 一 些 。 

Written on the 31<sup>st</sup> February-. 

<sup> 元 素 对 于 在 等 式 中 添加 指数 值 ， 以 及 在 日 期 等 数字 后 添加 st、nd、rd 以 及 也 后 缀 特别 有 
用 。 但 需要 注意 的 是 ， 在 一 些 浏览 器 中 ， 上 角 标 可 能 造成 其 所 在 行 与 上 一 行 的 行 间距 加 大 。 

19. <sub> 元 素 

<sub> 元 素 的 内 容 会 以 下 角 标 形式 显示 ， 因 此 <sub> 元 素 在 创建 脚注 时 特别 有 用 。 显 示 位 置 比 普 
通 字 符 低 半 个 字符 的 高 度 ， 并 且 比 周围 文本 的 字体 小 一 些 。 


The EPR paradox<sub>2</sub> was devised by Einstein. Podolsky, and Rosen 
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20. <mark> 元 素 


可 以 使 用 <mark> 元 素 在 文档 中 高 亮 显示 文本 ， 使 用 方式 类 似 于 在 纸 质 书 中 使 用 高 亮 笔 标 注 内 
容 。 在 一 些 网 站 中 ，<mark> 元 素 被 普遍 用 于 凸显 文本 块 中 匹配 到 搜索 字眼 的 内 容 。 下 面 展示 了 在 文 
本 块 中 使 用 <mark> 元 素 高 亮 显示 “HTML5” 一 词 : 

<p> This book focuses on the latest version of the language, popularly 

Teferred to as <mark>HTML5</mark>. There are two other versions you might encounter. 

These are HTML 4.01, the last major versions of the language from December 

1999 and a stricter version from 2000 called XHTML (Extensible Hypertext 

Markup Language). XHTML is still very popular in some applications so important 

differences between it and <mark>HTMLS</mark> will be called out in 

thetext </p> 


3.3.2 ”使 用 文本 标记 的 实例 


下 面 举例 说 明 用 于 标记 文本 的 各 种 元 素 及 特性 。 
例 3-7: 选择 一 套 标 记 来 为 咖啡 馆 网 站 创建 一 个 页 面 ， 用 来 展示 世界 上 炒 蛋 的 最 好 配方 。 现 在 
打开 文本 编辑 器 或 网 页 编辑 工具 ， 并 按照 以 下 步骤 操作 。 

(1) 为 文档 添加 框架 ;使 用 <html>、<head>、<title> 和 <body>。 
<!doctype html> 
<html> 

<head> 

<title>Wrox Recipes - Worlds Best Scrambled Eggs</title> 

</head> 

<body> 

Jbody> 
</html> 

(2) 在 文档 的 <body> 中 加 入 一 些 合适 的 标题 元 素 ， 这 将 有 助 于 组 织 页 面 结构 。 
<body> 

<h1>Wrox Recipes - World's Best Scrambled Eggs</h1> 

<h2>Ingredients</h2> 

<h2>Instmuctions</h2> 
<body> 
(3) 在 添加 一 个 说 明 此 配方 用 于 炒 蛋 的 <h1> 标 题 之 后 ， 现 在 加 入 一 些 解释 内 容 。 在 下 面 两 个 段 

落 中 使 用 之 前 介绍 的 一 些 元 素 : 


<hl>Wrox Recipes - World's Best Scrambled Eggs</h1> 
<p>Iadapted this recipe from a book called 
<a href="http://www.amazon.comy/exec/obidos/tg/detail/-/0864119917/"> 
<cite>Sydney Food</cite> 
‘</a> by Bill Grainger. Ever since tasting 
these eggs on my 1<sup>st</sup> visit to Bill's restaurant in Kings 
Cross. Sydney, I have been after the recipe. I have since transformed 
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it into whatIreally believe are the <em>best</em> scrambled eggs 
Ihave ever tasted.</p> 
<p>This recipe is what I call a <q>very special breakfast</q>; just look at 
the ingredients to see why. It has to be tasted to be believed </p> 
<cite> 元 素 标识 出 对 本 配方 来 源 书籍 的 引用 。 接 下 来 使 用 了 <sup> 元 素 ， 因 此 就 可 以 写 出 “1*” 
这 样 的 上 角 标 形式 。 不 过 因为 上 角 标 将 上 一 行 顶 了 起 来 ， 使 得 第 一 行 与 第 二 行 的 间距 大 于 第 二 行 与 
第 三 行 的 间距 。 第 一 段 文本 的 最 后 一 句 对 单词 “best” 进 行 了 强调 。 
在 第 二 段 中 ， 使 用 <q> 元 素 进行 文本 的 引用 。 
(4) 在 第 一 个 <h2> 元 素 之 后 使 用 无 序列 表 显 示 配方 清单 : 
<h2>Ingredients</h2> 
<p>The following ingredients make one serving:</p> 
<ul> 
<li>2 eggs</i> 
<li>1 tablespoon of butter (10g)</li> 
<li>1/3 cup of cream <i>(2 3/4 fl ounces)</i></i> 
<li>A pinch of salt</li> 
<li>Freshly milled black pepper</li> 
<li>3 fresh chives (chopped)</li> 
<ul> 
在 描述 奶油 使 用 量 的 那 一 行 ， 蔡 代 测 量 方式 使 用 斜体 显示 。 
(5) 在 第 二 个 <h2> 元 素 后 使 用 编码 列表 添加 指导 步骤 : 
<h2>Instructions</h2> 
<ol> 
<li>Whisk eggs, cream., and salt in a bowl.</li> 
<li>Melt the butter in a non-stick pan over a high heat <i>(taking care 
notto bum the butter)</i></li> 
<li>Pour egg mixture into pan and wait until it starts setting around 
the edge of the pan (around 20 seconds).</li> 
<li>Using a wooden spatula, bring the mixture into the center as ifit 
Were an omelet, and let it cook for another 20 seconds.</li> 
<li>Fold contents in again. leave for 20 seconds, and repeat until 
the eggs are only just done.</li> 
<li>Grind a light sprinkling of freshly milled pepper over the eggs 
and blend in some chopped fresh chives.</li> 
<o> 
<p>You should only make a <strong>maximum</strong> of two servings per fiying pan.</p> 
编码 列表 中 包含 用 斜体 字 添 加 的 注释 ， 指 明 不 要 烧 焦 黄油 。 最 后 一 段 中 包含 强烈 着 重 ， 指 明 在 
平底 锅 中 最 多 只 能 制作 两 份 炒 蛋 。 
(6) 将 本 例 以 recipeshtml 文件 名 保存 。 当 使 用 浏览 器 打开 该 文件 时 ,应 该 看 到 如 图 3-26 所 示 的 
效果 。 
将 内 容 描 述 元 素 以 更 粗 粒 度 加 入 文档 中 ， 从 而 加 入 更 有 含义 的 内 容 。 通 过 合理 使 用 这 些 元 素 ， 
可 以 强调 某 些 特定 步骤 中 的 重点 ， 通 过 指定 引用 信息 的 来 源 或 者 改变 语 态 来 指明 一 段 旁白 。 
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图 3-26 本 例 在 浏览 器 中 的 显示 效果 


茹 ] 编辑 文本 


以 下 是 两 个 专门 用 于 审阅 与 修改 文本 的 元 素 : 

e ”<ins> 元 素 ， 用 于 需要 插入 文本 时 (浏览 器 中 通常 以 下 划 线 字体 显示 )。 
”<de 记 元 素 ， 用 于 需要 删除 文本 时 (浏览 器 中 通常 以 横 穿线 字体 显示 )。 
下 面 展 示 了 在 HTML 中 进行 内 容 编辑 的 代码 : 
<hl>How to Spota Wrox Book</h1> 

<p>Wrox-spotting is a popular pastime in bookshops. Programmers like to find 

Wrox books are written by <del>1000 monkeys</del><ins>Programmers</ins> for 


Programmers.</p> 
<ins><p>Both readers and authors, however, have reservations about the use 


of photos on the covers.</p></ins> 
图 3-27 展示 了 上 述 代码 在 浏览 器 中 的 效果 。 
How to Spot a Wrox Book 


Wrox-spotting is a popular pastime in bookshops Programmers lle to find the distinctive blwered spines, because they know that 
Wrox books are written by 1000 -monleeysProgrammers for Programmers. 


图 3-27 在 HTML 中 进行 内 容 编辑 
这 些 特性 作为 编辑 工具 也 特别 有 用 ， 它 们 可 以 提示 由 其 他 作者 做 出 的 修改 。 


注意 各 
使 用 <ins> 和 <del> 元 素 时 必须 当心 不 能 将 块 级 元 素 (如 <p> 或 <h2> 元 素 ) 添 加 到 行内 元 素 中 (如 
<ins> 或 <de 上 > 元 素 )。 


可 以 使 用 title 特性 提供 谁 添加 了 <ins> 和 <del> 元 素 ， 以 及 添加 或 删除 原因 等 信息 。 在 主流 浏览 
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器 中 ， 这 些 信息 将 以 提示 标签 的 方式 呈现 给 用 户 。 还 可 以 在 <ins> 和 <del> 元 素 中 使 用 cite 特性 ， 以 

指定 来 源 以 及 修改 原因 等 信息 。 不 过 ， 因 为 cite 特性 的 取 值 必须 是 URI， 所 以 导致 其 使 用 限制 较 多 。 

<ins> 和 <del> 元 素 还 可 以 包含 datetime 特性 ， 其 取 值 应 该 是 符合 以 下 格式 的 日 期 与 时 间 : 
YYYY-MM-DDThh:mm:ss-TZD 
以 上 格式 中 各 部 分 的 含义 为 : 

YYYY 代表 年 份 

MM 代表 月 份 

DD 代表 该 月 的 第 几 天 

T 是 日 期 与 时 间 部 分 的 分 隔 符 

hh 代表 小 时 

mm 代表 分 钟 

ss 代表 秒 

TZD 是 时 区 指示 符 

例如 ，2018-09-16T20:30-05:00 代表 美国 东部 标准 时 间 2018 年 9 月 16 日 的 晚上 8 点 30 分 。 


注意 : 
datetime 特性 的 值 非常 长 ， 不 便于 手动 输入 。 该 值 可 以 使 用 编辑 网 页 的 程序 来 填写 。 


使 用 字符 实体 显示 特殊 字符 


大 多 数字 母 数字 字符 都 可 以 在 文档 中 直接 使 用 而 不 会 有 任何 问题 。 然而 有 些 字符 在 HTML 中 
具有 特殊 含义 ， 此 外 还 有 一 些 字符 在 键盘 上 并 没有 对 应 按键 。 例如 ,不 能 使 用 用 于 标识 HTML 标签 
起 止 的 尖 括 号 ， 因 为 浏览 器 会 错误 将 其 理解 为 HTML 标记 。 不 过 ， 可 以 使 用 一 组 不 同 的 字符 代替 这 
些 特殊 字符 ， 即 所 谓 的 “字符 实体 ”。 字 符 实体 有 时 还 称 作 “ 转 义 字符 ”。 

所 有 特殊 字符 都 可 以 使 用 数字 形式 的 字符 实体 蔡 代 ， 而 其 中 一 部 分 特殊 字符 还 有 对 应 的 命名 实 
体 ， 如 表 3-5 所 示 。 


表 3-5 ”常见 字符 的 数字 和 命名 实体 


字符 命名 实体 
& 
注释 


可 以 在 HTML 文档 的 任何 标签 之 间 使 用 注释 ， 格 式 如 下 : 


<!-- comment goes here -> 


sr 
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任何 从 <!-- 之 后 ， 到 --> 为 止 的 内 容 都 不 会 显示 。 尽 管 在 源 代码 中 仍然 可 见 ， 但 不 会 显示 在 浏览 
器 中 。 

在 代码 中 添加 注释 是 一 种 良好 习惯 。 特 别 在 复杂 文档 中 ， 使 用 注释 为 文档 添加 分 区 描述 以 及 其 
他 注释 ， 有 助 于 他 人 理解 代码 。 

甚至 可 以 注释 掉 整 节 代码 。 在 下 面 这 段 代码 中 ，<h2> 元 素 中 的 内 容 将 不 会 显示 。 还 有 指明 代码 
分 段 的 注释 ， 内 容 包 括 添加 者 以 及 添加 时 间 等 。 

<!-- Start of Footnotes Section added 04-24-04 by Bob Stewart 一 > 

<!~ <h2>Character Entities</h2> -> 
entities</strong> can be used to escape special 
characters that the browser might otherwise think have special meaning.</p> 

<!-- End of Footnotes section -> 


本 章 小 结 


本 章 在 介绍 基本 的 结构 化 元 素 后 ,介绍 了 很 多 用 于 描述 文本 结构 的 新 元 素 及 其 可 以 携带 的 特性 。 

e@ 呈现 性 元 素 : <b>、<i>、<sup> 以 及 <sub> 

e@ 短语 类 元 素 : <em>、<strong>、<abbr>、<dfhn>、<blockquote>、<q>、<cite>、<code>、<kbd>、 

<var> 以 及 <samp> 

e 编辑 类 元 素 : <ins> 以 及 <del> 

本 章 还 介绍 了 链接 。 链 接 使 用 户 可 以 在 页 面 之 间 甚 至 同一 页 面 的 不 同 部 分 之 间 进 行 跳 转 ， 这 样 
就 不 需要 通过 滚动 页 面 来 定位 所 需要 内 容 的 位 置 。 可 以 通过 使 用 id 特性 链接 到 页 面 中 的 指定 部 分 。 
本 章 接 下 来 介绍 了 关于 URL 的 知识 ， 以 及 绝对 URL 地 址 与 相对 URL 地 址 间 的 区 别 。 

本 章 还 介绍 了 用 于 添加 文本 级 语义 的 许多 元 素 ， 以 及 两 个 专门 用 于 审阅 与 修改 文本 的 元 素 : 
<ins> 元 素 与 <del> 元 素 。 最 后 ， 简 单 介 绍 了 使 用 字符 实体 显示 特殊 字符 与 使 用 注释 。 


思考 和 练习 


1. 使 用 相关 呈现 性 元 素 标记 以 下 语句 : 

The 1st time the bold man wrote in italics, he emphasized several key words. 

2. 为 Example Cafe 网 站 创建 3 个 页 面 ， 每 一 个 页 面 的 起 始 部 分 与 首页 类 似 ， 有 一 个 一 级 标题 
“Example Cafe”, 之 后 是 一 段 文字 “Welecome to Example Cafe. We will be developing this site throughout 
the book”。 在 这 段 内 容 之 后 : 

a. 在 “菜单 ”页 面 , 添加 一 个 二 级 标题 “Menu”。 之 后 应 该 有 一 段 文字 “The menu will go here”。 
更 新 <title> 元 素 中 的 内 容 以 反映 本 页 功能 ， 即 咖啡 馆 菜单 页 。 以 文件 名 menu.html 保存 文件 。 

b. 在 “营业 时 间 ” 页 面 , 添加 一 个 二 级 标题 “Opening hours”。 之 后 应 该 有 一 段 文字 “Details of 
opening hours and how to find us will go here”。 更 新 <title> 元 素 中 的 内 容 以 反映 本 页 功能 ， 即 告知 顾 
客 营业 时 间 及 本 店 位 置 。 以 文件 名 opening html 保存 文件 。 


和 as 
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c. 在 “联系 信息 ”页 面 ， 添 加 一 个 二 级 标题 “Contact”。 本 页 中 应 该 包含 地 址 “12 Sea View, 
Newquay, Comwall, UK”。 更 新 <title> 元 素 以 反映 本 页 功能 ， 即 告知 顾客 本 店 的 联系 地 址 。 
3. 创建 一 个 新 页 面 ， 其 中 包含 直接 指向 菜单 页 中 各 个 菜品 的 链接 。 最 后 再 添加 一 个 指向 Wrox 


网 站 的 链接 (www.wrox.com)。 页 面 的 显示 效果 如 图 3-28 所 示 。 


D Uinksto Eample Cafe and Wi X 
OO: 


€ 3 C © fleJWF/n5+css3JHTML5+CSS3/hs/ch.… 


Links to Example Cafe 


Starters | Main Courses | Desserts 
This is an example taken from a book published by Wrox Press 


图 3-28 ”页面 的 显示 效果 


4. 返回 并 检查 示例 应 用 程序 中 的 页 面 ， 确 认 已 经 更 新 了 每 一 页 的 导航 模块 。 
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表格 与 列表 


表格 以 行 和 列 显示 信息 ， 它 们 被 普遍 用 于 显示 所 有 适合 网 格 结构 的 数据 ， 如 列车 时 刻 表 、 电 视 
节目 表 、 财 务 报告 以 及 体育 赛事 结果 。 列 表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 
以 便 浏 览 者 更 加 快捷 地 获取 信息 。 本 章 将 主要 介绍 何 时 使 用 表格 以 及 创建 它们 所 需要 的 标记 。 本 章 
还 介绍 如 何在 HIML 中 创建 3 种 类 型 的 列表 。 


本 章 的 学 习 目标 : 

ee 了解 表格 的 概念 以 及 在 HIML 中 使 用 它们 的 方法 
掌握 基本 表格 元 素 与 特性 

了 解 创建 易 访问 表格 的 方法 

掌握 各 种 形式 列表 的 实现 


祖 栽 仍 绎 


要 想 使 用 表格 , 需要 以 “网 格 ”模式 去 思考 。 图 4-1 展示 了 NFL( 美 国 全 国 橄榄 球 联盟 ，National 
Football League) 中 国 官方 网 站 ， 上 面 有 每 一 支 球 队 的 当前 状态 。 可 以 在 其 中 看 到 主 、 客 球 队列 表 以 
及 比赛 时 间 列 表 ， 而 对 于 每 支 球 队 又 有 多 个 列 提供 不 同 的 状态 信息 ， 包 括 胜 、 负 或 平局 的 比分 。 

如 果 查 看 一 个 网 页 ， 想 要 了 解 该 网 页 是 否 使 用 表格 来 控制 其 数据 的 布局 方式 ， 可 以 查看 页 面 的 
源 代 码 ， 在 其 中 寻找 想 要 了 解 的 元 素 。 

表格 类 似 于 电子 表格 ， 因 为 它们 都 由 行 和 列 组 成 ， 如 图 4-2 所 示 。 

这 里 能 看 到 一 个 由 矩形 组 成 的 网 格 。 每 个 矩形 被 称 作 一 个 “单元 ”(cel)。 一 “ 行 ”kow) 由 一 组 
由 左 至 右 位 于 同一 横 线 内 的 单元 组 成 ， 一 “ 列 ”(colhumn) 由 从 上 至 下 位 于 同一 纵 列 内 的 单元 组 成 。 

现在 来 看 一 个 基本 HTML 表格 的 例子 ， 从 中 可 以 了 解 它 是 如 何 创建 的 ， 如 图 4-3 所 示 。 

可 以 使 用 <table> 元 素 创建 HIML 表格 。 在 <table> 元 素 内 ,表格 是 以 行 挨 着 行 的 形式 书写 的 。 每 
一 行 包含 在 一 个 <t> 元 素 内 ，“tt” 代 表 “ 表 格 行 ”(table row)。 之 后 每 个 单元 使 用 <td> 元 素 写 在 行 
元 素 内 ，“td” 代 表 “ 表 格 数据 ”(table data)。 
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图 4-1 NFL 中 国 官方 网 站 


行 


个 [第 1 列 


第 1 行 w| ”第 1 行 = 


# 第 2 列 


# 第 3 列 


第 1 行 w 


# 第 1 列 


第 2 行 = | 第 2 行 ~ 


4 第 2 列 


4 第 3 列 


第 2 行 w 


+ 第 1 列 


第 3 行 w | 第 3 行 ~ 


+ 第 2 列 


3 第 3 列 


第 3 行 中 


第 4 行 第 4 行 w 


4 第 2 列 


4 第 3 列 


第 4 行 中 


4 第 1 列 


第 5 行 ~ 第 5 行 ~ 


+4 第 2 列 


+ 第 3 列 


第 5 行 ~ 


图 4-2 表格 由 行 和 列 组 成 


DC © 


D — NE#HTMIES x 


+ 
le///G/HTMLS + CS... 


IRow 1, Column 1|Row 1, Column 2| 


Row 2, Column 1|Row 2, Column zl 


oo: 


区 


图 4-3 一 个 基本 HTML 表格 


下 面 是 用 于 创建 该 基本 表格 的 代码 : 


<table border="1"> 
<b> 
<td>Row 1. Column 1</td> 
<td>Row 1, Column 2</td> 


</table> 


当 在 文本 编辑 器 内 编写 表格 代码 时 ， 应 该 如 示例 中 所 示 ， 以 新 行 开始 每 一 个 表格 行 及 单元 ， 并 
且 将 单元 缩 进 到 表格 行内 。 如 果 使 用 Dreamweaver 之 类 的 网 页 编写 工具 ， 则 很 可 能 已 经 自动 缩 进 了 


代码 。 缩 进 代码 可 以 使 跟踪 每 个 元 素 的 开 闭 标签 更 加 容易 。 


再 来 看 一 遍 相同 的 代码 。 这 一 次 没有 被 分 割 到 不 同 的 行内 ， 也 没有 缩 进 代码 ， 非 常 难以 阅读 。 
<table border-"l><t><td>Row 1, Column 1</td><td>Row 1. Column 2</td></tr><h> 
<td>Row 2. Column 1</td><td>Row 2. Column 2</td></tr></table> 


所 有 的 表格 都 遵守 这 一 基本 结构 ， 尽 管 使 用 额外 的 元 素 和 特性 可 以 使 你 控制 表格 的 呈现 。 如 果 
行 或 列 应 该 包含 表 头 ， 可 以 对 包含 表 头 的 单元 使 用 <th> 元 素 代 蔡 <td> 元 素 。 默 认 情 况 下 ， 大 多 数 浏 


览 器 会 以 粗 体 演 染 < 了 h> 元 素 的 内 容 。 
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注意 : 

每 个 单元 都 应 该 使 用 <td> 或 < 也 > 元 素来 表示 ， 从 而 确保 表格 能 正确 显示 。 即使 单元 中 没有 数据 ， 
也 应 该 这 样 做 。 

现在 来 看 一 个 稍微 复杂 一 点 的 表格 ， 如 图 4-4 所 示 。 这 个 表格 中 包含 表 头 。 在 本 例 中 ， 表 格 显 
示 的 是 一 家 小 公司 的 财务 总 结 。 


a 
D -sone x 十 


CC 回 fleyWWGyHTMisicssan5 立 国 日 


[outgoings (S$) Receipts 加 [rromG 

Quarter 1 Jan-Man) |11200.00 |21800.00 |10600,00, 
Quarter 2 (Apr-Jun) |11700.00 |22500.00 [10800.00 
(Quarter 3 ul Sep) 11650.00 |22100.00 [10450.00 


[Quarter 4 (Oct- Dec) 1185000 |22900.00 i1050.00 


图 4-4 一 家 小 公司 的 财务 总 结 
下 面 是 用 于 创建 该 表格 的 代码 : 


<table border="1"> 


<th>Quarter 2 (Apr-Jun)</th> 
<td>11700.00</td> 
<td>22500.00</td> 
<td><b>10800.00</b></td> 
< 
< 
<th>Quarter 3 (Jul - Sep)</th> 
<td>11650.00</td> 
<td>22100.00</td> 
<td><b>10450.00</b></td> 
<> 
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第 一 行 被 全 部 作为 表 头 ， 包 括 支出 、 收 入 以 及 利润 。 图 4-4 中 的 左上 角 为 空 单元 ， 在 表格 代 
码 中 ， 仍 然 需要 使 用 空 的 <td> 元 素 以 告知 浏览 器 该 单元 为 空 (否则 浏览 器 无 法 获知 此 处 有 一 个 空 的 
单元 )。 

在 每 一 行 中 ， 第 一 个 单元 同样 是 表 头 单元 (使 用 <th> 指 定 )， 用 以 声明 该 行 结果 所 属 的 财 季 。 之 
后 每 行 中 剩 下 的 三 个 单元 包含 了 表格 数据 ， 这 些 数据 都 包含 在 <td> 元 素 内 。 

利润 数据 (位 于 最 右 列 ) 包 含 在 一 个 <b> 元 素 内 ， 它 会 以 粗 体 显 示 利润 数据 。 这 里 演示 了 在 单元 中 
如 何 包含 任意 类 型 的 标记 。 在 表格 中 放置 其 他 标记 的 唯一 限制 是 ， 元 素 必须 嵌 套 于 单元 内 (无 论 <td> 
还 是 <th> 元 素 )。 不 能 在 单元 内 包含 元 素 的 开始 标签 ， 而 结束 标签 位 于 单元 之 外 ， 反 之 亦 然 。 

在 创建 表格 时 , 很 多 人 实际 上 并 不 在 乎 使 用 <th> 元 素 , 而 是 对 于 任何 单元 (包括 表 头 ) 都 使 用 <td> 
元 素 。 但 是 ， 无 论 何 时 有 一 个 表 头 ， 都 应 该 尽量 使 用 <th> 元 素 。 特 别 在 使 用 scope 特性 (将 在 4.2 节 
“基本 表格 元 素 与 特性 ”中 了 解 到 ) 时 尤其 应 该 这 样 做 ， 因 为 它 只 对 <th> 元 素 有 效 。 

注意 : 

表格 可 以 占据 很 多 空间 ， 从 而 使 文档 变 得 很 长 ， 但 清晰 的 表格 格式 可 以 使 你 更 加 容易 地 了 解 代 
码 运行 的 情况 。 


EE 好 塌 札 祖 栽 兄 索 丐 牺 忽 


前 面 已 经 介绍 了 基本 表格 是 如 何 工作 的 ， 本 节 将 对 这 些 元 素 稍微 加 以 描述 ， 并 将 介绍 它们 可 包 
含 的 特性 。 其 中 一 些 特性 可 用 于 创建 更 加 复杂 的 表格 布局 。 先 快速 浏览 本 节 ， 等 到 需要 使 用 这 些 标 
记 时 ， 随 时 可 以 再 回来 仔细 研究 这 些 标记 以 了 解 如 何 实现 需求 。 
4.2.1 ”使 用 <table> 元 素 创 建 表格 


<table> 元 素 是 所 有 表格 的 包含 元 素 。 它 可 以 包含 以 下 特性 : 
e ”所 有 通用 特性 
e 面向 脚本 的 基本 事件 特性 


1. dir 特性 


dir 特性 应 该 被 用 于 指定 表格 中 所 使 用 文本 的 行文 方向 。 可 能 的 取 值 为 由 左 向 右 的 tt 或 由 右 向 
左 的 划 ( 源 于 希 伯 来 语 和 阿拉 伯 语 等 语言 ): 

dir="rtl" 

如 果 在 <table> 元 素 中 使 用 值 为 由 的 dir 特性 ， 单 元 将 从 右 开 始 显示 ， 每 一 个 后 续 单元 将 从 该 单 
元 起 向 左 排列 。 


2. <tr> 元 素 包含 表格 行 


<tr> 元 素 包含 表格 的 每 一 行 。 任 何 出 现在 <tr> 元 素 中 的 内 容 应 该 出 现在 同一 行 中 。 
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3. <td> 与 <th> 元 素 表 示 表 格 单元 


表格 中 的 每 一 个 单元 可 以 由 <td> 元 素 表示 ， 表 示 里 面包 含 的 是 表格 数据 ， 也 可 以 由 <th> 元 素 表 
示 ， 表 示 里 面包 含 的 是 表 头 信息 。 

默认 情况 下 ，<th> 元 素 的 内 容 通常 以 粗 体 显示 ， 并 水 平 对 齐 于 单元 中 央 。 同 时 ，<td> 元 素 的 内 
容 则 通常 以 左 对 齐 非 粗 体 显示 (除非 使 用 CSS 或 其 他 元 素 另 行 设 置 )。 

<td> 与 <th> 元 素 可 以 包含 相同 的 特性 集 ， 并 且 特 性 只 作用 于 所 在 单元 。 这 些 特 性 拥有 的 任何 效 
果 将 覆盖 表格 或 任何 包含 元 素 (如 表格 行 ) 的 整体 设置 。 

除 通 用 特性 以 及 基本 事件 特性 外 ，<td> 与 <th> 元 素 还 可 包含 以 下 特性 : 

colspan headers rowspan 

<th> 元 素 还 可 以 包含 scope 特性 。 

4. colspan 特性 

当 一 个 单元 应 该 横向 跨越 多 个 列 时 ， 可 以 使 用 colspan 特性 。 该 特性 的 取 值 指定 所 在 单元 横 跨 
的 表格 列 数 (具体 可 以 查看 4.4.1 节 “ 使 用 colspan 特性 跨越 列 ”。) 

colspan="2" 

5. headers 特性 

headers 特性 指明 哪些 表 头 应 该 对 应 所 在 单元 。 该 特性 的 值 是 一 个 由 空格 分 隔 的 表 头 单元 id 特 
性 值 列表 : 

headers="income ql1" 

该 特性 的 主要 目的 是 支持 语音 浏览 器 。 当 表格 以 语音 形式 读 出 时 ， 听 众 很 难保 持 跟踪 所 在 的 行 
与 列 。 因 此 ，headers 特性 提醒 使 用 者 当前 单元 的 数据 所 属 的 行 与 列 。 

6. rowspan 特性 

rowspan 特性 指明 一 个 单元 纵向 跨越 多 少 表格 行 。 该 特性 的 值 为 所 在 单元 伸展 跨越 的 表格 行 数 ， 
有 具体 可 以 查看 4.4.2 节 “ 使 用 rowspan 特性 跨 域 行 ”。 

TOWspan="2" 


7. scope 特性 


可 以 使 用 scope 特性 指定 当前 表 头 向 哪些 单元 提供 标签 和 表 头 信息 。 可 以 在 基本 表格 中 使 用 该 
特性 替代 headers 特性 ， 但 目前 对 它 的 支持 还 不 多 。 

scope="range" 

表 4-1 展示 了 该 特性 的 可 能 取 值 。 
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表 4-1 scope 特性 的 可 能 取 值 


值 作 用 
Tow 所 在 单元 包含 该 行 的 表 头 信息 
col 所 在 单元 包含 该 列 的 表 头 信息 
rowgroup | 所 在 单元 包含 该 行 组 的 表 头 信息 (由 <thead>、<tbody> 或 <tfoot> 元 素 创建 的 位 于 一 行内 的 一 组 单元 ) 
colgroup 所 在 单元 包含 该 列 组 的 表 头 信息 (一 组 由 <co> 或 <colgroup> 元 素 创建 的 列 ， 将 在 44 节 “ 表 格 区 域 
分 组 ”中 进行 讨论 ) 


4.2.2 ”创建 基本 表格 


我 们 已 经 了 解 了 表格 的 基本 元 素 与 特性 , 现在 可 以 创建 一 个 显示 关于 Example Cafe 经 营 时 间 信 
息 的 表格 。 

例 4-1: 创建 营业 时 间 表 。 

在 本 例 中 ， 要 为 Example Cafe 创建 一 个 展示 营业 时 间 的 表格 。 该 表格 的 效果 如 图 4-5 所 示 。 


口 x 
站 BampR cafe commv x 


© 口 fle///DVh5+css3/HTMLS5+CSS3/hs/cho3yExamplest20Cafe/contacthtml 虹 定 三 


EXAMPLE CAFE 


HONE KEN RECIPES CONTACT 


Contact 


图 4-5 展示 营业 时 间 的 表格 


(1) 在 文本 编辑 器 或 HTML 编辑 器 中 打开 contact.html 文件 , 并 在 电子 邮件 地 址 链接 下 面 添 加 一 
个 展示 营业 时 间 的 表格 。 

(2) 这 个 表格 包含 于 <table> 元 素 内 ， 内 容 将 逐 行书 写 。 该 表格 包含 3 行 8 列 。 

从 最 上 面 第 1 行 开始 ， 有 8 个 表 头 元 素 。 第 1 个 <th> 元 素 为 空 ， 因 为 表格 的 左上 角 单 元 是 空 的 。 
之 后 的 7 个 单元 包含 一 周 的 每 一 天 。 

在 表格 的 第 2 行 中 ， 第 1 个 单元 起 到 所 在 行 表 头 的 作用 ， 用 于 指明 进餐 时 间 ( 早 餐 )。 剩 下 的 单元 
显示 提供 服务 的 时 间 。 接 下 来 第 3 行 与 第 2 行 的 格式 相同 ， 不 过 显示 的 是 午餐 时 间 。 
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< 
<b> 


</table> 

只 要 接受 逐 行书 写 的 方式 ， 创 建 很 复杂 的 表格 就 不 会 有 什么 问题 。 

G3) 将 文件 保存 为 contacthtml。 

<table> 元 素 用 于 表示 表格 内 的 信息 。<table> 元 素 起 到 多 行 数据 容器 的 作用 ， 而 行 数据 则 由 <tr> 
元 素 表示 。<tr> 元 素 包含 由 <td> 元 素 包含 的 表格 化 数据 。 按 照 这 一 模式 ， 可 以 轻松 构建 出 大 型 数据 
或 信息 网 格 。 


无 论 表格 是 用 于 显示 某 特定 试验 的 结果 还 是 某 一 特定 市 场 的 股票 指数 ， 抑 或 今 晚 的 电视 节目 ， 
每 个 表格 都 应 该 拥有 标题 ， 这 样 网 站 访问 者 才能 知道 表格 的 用 途 。 
即使 周围 的 文本 描述 了 表格 的 内 容 ， 使 用 <caption> 元 素 赋予 表格 正式 的 标题 仍然 是 一 种 良好 的 
习惯 。 默 认 情 况 下 ， 多 数 浏览 器 在 表格 的 中 央 位 置 显 示 元 素 的 内 容 。 
<caption> 元 素 直接 出 现在 开始 标签 <table> 之 后 ， 并 且 应 该 位 于 第 一 行 之 前 : 
<table> 
<caption> Opening hours for the Example Cafe</caption> 
<b> 
通过 使 用 <caption> 元 素 ， 相 比 于 仅仅 在 表格 之 前 或 之 后 的 段落 中 描述 其 目的 ， 可 以 将 表格 内 容 
与 该 描述 相关 联 ， 而 且 这 种 关联 还 可 以 被 屏幕 阅读 器 以 及 其 他 处 理 Web 页 面 的 应 用 程序 (如 搜索 引 
擎 ) 处 理 。 
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祖 栽 医 埠 切 绅 


在 本 节 中 将 介绍 一 些 可 以 将 表格 中 的 单元 、 行 以 及 列 组 织 到 一 起 的 技术 ， 包 括 以 下 内 容 。 
e 使 用 rowspan 及 colspan 特性 使 单元 跨越 多 个 行 或 列 。 

e@ 将 表格 分 割 为 三 个 区 域 : 表 头 、 表 体 以 及 表 尾 。 

@ ”使 用 <colgroup> 元 素 对 列 分 组 。 

@ ”使 用 <col> 元 素 在 不 相关 列 之 间 共 享 特 性 。 


4.4.1 使 用 colspan 特性 跨越 列 


对 于 <td> 及 <th> 元 素 ， 二 者 都 可 以 包含 一 个 名 为 colspan 的 特性 ， 该 特性 使 表格 单元 可 以 跨越 
多 列 。 

图 4-6 展示 了 一 个 拥有 三 个 列 的 表格 。 表 格 中 的 单元 被 涂 上 颜色 以 演示 colspan 所 起 的 作用 ; 

e 在 第 1 行 中 ， 有 三 个 等 宽 列 ， 并 且 每 列 有 一 个 单元 。 

e 在 第 2 行 中 ， 第 1 个 单元 为 一 列 的 宽度 ， 第 2 个 单元 则 跨越 两 列 的 宽度 。 

e 在 第 3 行 中 ， 只 有 一 个 跨越 三 列 宽度 的 单元 。 


Be ER Yow Hoy Booinats Tods top 
Spanning columins usirg the celspen, akrioutc 


图 4-6 有 三 个 列 的 表格 


现在 来 看 一 下 本 例 使 用 的 代码 以 了 解 如 何 使 用 colspan 特性 。 本 例 还 使 用 了 CSS 以 在 视觉 上 展 
示 出 重点 。 


<table> 
<caption>Spanning columns using the colspan attribute</caption> 
<t> 
<td class—"one">gnbsp:</td> 
<td class—"two">&nbsp:</td> 
<td class="three">&nbsp:</td> 


so 
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<t> 
</table> 


在 第 1 行 中 ， 可 以 看 到 其 中 有 三 个 <td> 元 素 ， 每 一 个 对 应 一 个 单元 。 
在 第 2 行 中 ， 只 有 两 个 <td> 元 素 ， 并 且 其 中 的 第 2 个 元 素 包含 了 colspan 特性 。colspan 特性 的 


值 指明 单元 需要 跨越 的 列 数 。 在 本 例 中 ， 第 2 个 单元 跨越 两 列 ， 


因此 该 特性 的 值 为 2。 


在 最 后 一 行 中 ， 只 有 一 个 <td> 元 素 ， 并 且 colspan 特性 的 值 为 3， 指 明 单 元 应 该 占用 三 列 。 

在 与 表格 打交道 时 必须 以 网 格 的 模式 去 思考 。 这 里 的 网 格 有 三 列 宽 、 三 行 高 ， 所 以 中 间 行 无 法 
拥有 两 个 等 宽 的 单元 ， 因 为 它们 无 法 匹配 到 网 格 中 ， 不 可 能 拥有 跨越 1.5 列 的 单元 。 

一 个 可 以 利用 colspan 特性 的 例子 是 ， 在 创建 时 刻 表 或 时 间 计划 表 时 ， 一 天 可 以 被 分 解 为 不 同 


的 小 时 数 ， 有 些 时 段 持续 1 小 时 ， 有 的 则 持续 2 到 3 小 时 。 


注意 单元 中 “无 中 断 空格 符 ”(&nbsp;) 的 使 用 。 引 入 它 是 为 了 使 单元 拥有 一 些 内 容 ， 如 果 单 元 


中 没有 内 容 ， 一 些 浏览 器 就 无 法 显示 背景 色 。 
4.4.2 ”使 用 rowspan 特性 跨越 行 


rowspan 特性 的 作用 与 colspan 特性 类 似 ， 只 是 它 在 相反 的 方 
向 跨越 单元 行 。 可 以 在 图 4-7 中 看 到 rowspan 特性 的 效果 。 


铅 上 工作 : rowspan 使 单元 可 以 纵 


We 中 Vem Hay nal5 Tro5 Heb © 


| 
— 


Spanaing rows using the rowsper attribie 


图 4-7 rowspan 特性 的 效果 
在 使 用 rowspan 特性 时 ， 所 在 单元 以 下 的 对 应 单元 必须 省 略 : 
<table> 
<caption>Spanning rows using the rowspan attribute</caption> 
<b> 

<td class="one">&nbsp:</td> 

<td class="two">&nbsp:</td> 

<td rowspan="3" class="three">&nbsp;</td> 
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4.4.3 ”将 表格 分 解 为 表 头 、 表 体 及 表 尾 


某 些 情况 下 ， 需 要 将 表 体 与 表 头 或 表 尾 区 分 开 来 。 例 如 银行 结算 单 : 其 中 表 头 包含 每 列 的 头 部 
信息 ， 表 体 包含 存 取 交 易 的 列表 ， 而 表 尾 则 包含 账户 的 结算 余额 。 

如 果 表 格 太 长 以 至 于 在 屏幕 中 显示 不 全 ， 那 么 表 头 与 表 尾 可 以 始终 保持 可 见 ， 而 表 体 中 则 会 出 
现 滚动 条 。 同 样 ， 在 打印 一 个 大 于 一 页 长 度 的 表格 时 ， 一 般 希 望 浏览 器 能 够 在 每 一 页 上 打印 表 头 和 
表 尾 。 但 是 ， 主 流 浏览 器 目前 对 此 尚 不 支持 ， 只 能 使 用 由 CSS 和 JavaScript 实现 的 可 选 方案 。 尽 管 
如 此 ， 如 果 在 表格 中 添加 了 这 些 元 素 ， 就 可 以 使 用 CSS 为 <thead>、<tbody> 以 及 <tfoot> 中 的 内 容 添 
加 不 同 的 样式 风格 。 

以 下 是 这 三 个 用 于 将 表格 分 解 为 表 头 、 表 体 及 表 尾 的 元 素 

e@ <thead> 创 建 独立 的 表 头 

. > 指定 表 体 

e@ <tfoot> 创 建 独立 的 表 尾 

表格 也 可 能 包含 多 个 <tbody> 元 素 以 指明 不 同 的 页 面 或 数据 分 组 。 

下 面 是 一 个 使 用 这 些 元 素 的 表格 示例 : 


<table> 


<td>$197027</td> 
<td>$2450.00</td> 
<td>$8940.88</td> 
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<td>$8351.16</td> 
</> 
<t> 
<td>14 Jan 12<htd> 
<td>Whole Foods</td> 
<td>$75.28</td> 
<td></td> 
<td>$8275.88</td> 
<> 
<u> 
<td>14 Jun 12</td> 
<td>Visa Payment</td> 
<td>$350.00</td> 
<td></td> 
<td>$7925.88</td> 
<> 
<t> 
<td>15 Jun 12</td> 
<td>Cheque 122501</td> 
<td></td> 
<td>$1450.00</td> 
<td>$9375.88</td> 
<> 


</tbody> 
<tbody> 


<t> 
<td>17 Jun 12</td> 
<td>Murco</td> 
<td>$60.00</td> 
<td></td> 
<td>$9315.88</td> 

<> 

<b> 
<td>18 Jun 12</td> 
<td>Wrox Press</td> 
<td></td> 
<td>$1000.00</td> 
<td>$10315.88</td> 

</> 

<b> 
<td>18 Jun 12</td> 
<td>McLellans Bakery</td> 
<td>$25.00</td> 
<td></td> 
<td>$10290.88</td> 
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图 4-8 展示 了 本 例 在 Firefox 浏览 器 中 的 效果 ，Firefox 浏览 器 支持 thead、tbody 以 及 tfoot 元 素 。 
本 例 使 用 CSS 设置 表 头 和 表 尾 的 背景 颜色 。 


[EEC 
Transaction date Payment type nd details Paid omt Paidin Balance 
2 $99 $841115 


$1350 00 F894028 
$1970 27 $2450 00 $894088 


图 4-8 本 例 在 Firefox 浏览 器 中 的 效果 


4.4.4 使 用 <colgroup> 元 素 对 列 进 行 分 组 
如 果 两 列 或 更 多 列 是 相互 关联 的 ， 则 可 以 使 用 <colgroup> 元 素 解释 这 些 列 应 该 被 归 到 同一 组 中 。 
例如 ， 在 下 面 的 表格 中 ， 一 共 应 该 有 六 列 。 前 面 的 四 列 属 于 第 一 个 列 组 ， 而 后 面 的 两 列 则 属于 
第 二 个 列 组 。 


<table> 
<colgroup span="4" class="mainColumns" /> 
<colgroup span="2" class="subTotalColumns" /> 


在 使 用 <colgroup> 元 素 时 ， 它 应 该 直接 出 现在 <table> 开 始 标签 之 后 ， 并 包含 span 特性 ， 用 以 指 
定 该 组 包含 多 少 列 。 

在 本 例 中 , class 特性 用 于 附加 CSS 规则 ,以 告知 浏览 器 分 组 中 每 一 列 的 宽度 以 及 每 个 单元 的 背 
景 颜色 。 我 们 将 在 第 7 章 中 了 解 CSS 的 更 多 内 容 ， 但 值得 注意 的 是 ， 部 分 浏览 器 只 支持 该 元 素 所 用 
CSS 规则 的 一 个 子 集 。 本 例 的 效果 如 图 4-9 所 示 。 
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图 4-9 ”使 用 <colgroup> 元 素 对 列 进行 分 组 


4.4.5 ”使 用 <col> 元 素 在 列 间 共 享 样式 


<col> 元 素 为 <colgroup> 中 的 列 指定 特性 (如 列 内 单元 的 宽度 与 对 齐 方式 )。 与 <colgroup> 元 素 不 
同 ，<col> 元 素 不 隐 含 任何 结构 性 分 组 ， 因 此 被 更 多 地 用 于 呈现 目的 。<col> 元 素 永远 是 空 元 素 。 它 
们 没有 任何 内 容 ， 但 可 以 包含 特性 。<col> 元 素 可 以 包含 的 特性 与 <colgroup> 元 素 相同 。 
例如 ， 下 面 的 表格 应 该 有 六 列 ， 而 最 前 面 的 五 列 尽管 不 是 位 于 它们 独立 拥有 的 分 组 中 ， 但 因为 
属于 独立 的 集合 (由 <col> 元 素 指定 )， 所 以 可 以 得 到 与 最 后 一 列 不 同 的 格式 。 
<table> 
<colgroup span="6"> 
<col span="5" class="mainColumns" /> 
<col span="1" class="totalColumn" /> 
/eolgroup> 
<b> 
<td></td> 


<> 
</table> 


可 以 在 图 4-10 中 看 到 本 例 的 效果 。 


Bo Ed: Won Hay Eomale Te be 


图 4-10 使 用 <col> 元 素 在 列 间 共 享 样式 


嵘 半 祖 栽 


正如 前 面 提 到 的 ， 可 以 在 表格 单元 中 包含 标记 ， 只 要 元 素 全 部 包含 于 单元 内 即 可 。 这 意味 着 可 
以 将 另 一 个 表格 整体 放置 于 一 个 表格 单元 内 ， 从 而 创建 所 谓 的 “ 嵌 套 表格 ”。 图 4-11 展示 了 一 个 周 
末 活 动 计 划 的 表格 。 
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[Moming Aftemoon 
[Saturday [Cyclng [Fishing 


Grouwpl Group2 
Water sking Wake boarding 


Sunday Rowing 


4-11 一 个 周末 活动 计划 的 表格 
这 个 表格 右 下 角 的 单元 中 是 另 一 个 表格 ， 它 将 参与 者 分 成 两 组 


<table> 


我 们 已 经 了 解 了 如 何 创建 嵌 套 表格 ， 但 应 该 注意 的 是 ， 应 该 尽量 少 用 嵌 套 表格 ， 因 为 对 于 依赖 
于 屏幕 阅读 器 的 人 们 而 言 ， 嵌 套 表格 非常 难于 理解 。 我 们 将 在 4.6 节 中 对 此 进行 讲解 。 


四 9 彰 诀 闯 祝 栽 


表格 本 身 可 以 包含 大 量 数 据 ， 并 能 对 这 些 信 息 提供 一 种 很 有 帮助 的 视觉 呈现 形式 。 在 查看 一 张 
表格 时 ， 很 容易 就 可 以 通过 上 下 左右 扫描 ， 在 行 与 列 之 间 找 到 一 个 特定 的 值 ， 或 者 比较 一 定 范围 内 
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的 值 。 回 顾 一 下 在 本 章 开头 看 到 的 示例 (NFL 比赛 结果 )， 不 必 读 完 表格 的 全 部 内 容 就 能 找到 你 喜爱 
的 队伍 在 本 赛季 的 表现 如 何 。 
然而 ， 对 于 那些 通过 语音 浏览 器 或 屏幕 阅读 器 听取 页 面 内 容 的 人 ， 表 格 会 变 得 非常 难于 理解 。 
例如 ， 想 象 一 下 正在 听取 一 张 表格 的 内 容 ， 想 要 比较 跨越 一 行 或 一 列 的 条 目 会 变 得 非常 困难 。 因 
为 必须 记 住 到 目前 为 止 听 到 的 所 有 内 容 ( 不 像 用 眼睛 前 后 扫描 那么 容易 )。 
但 只 要 稍微 用 心 或 计划 一 下 ， 就 可 以 使 表格 对 所 有 人 都 容易 理解 得 多 。 下 面 是 一 些 可 以 为 确保 
表格 易于 理解 而 做 的 事情 : 
@ 为 表格 添加 标题 。<caption> 元 素 明确 地 将 一 个 标题 与 表格 关联 ， 而 屏幕 阅读 器 可 以 在 用 户 
遇 到 表格 前 先 将 标题 读 给 用 户 ， 这 样 他 们 就 能 够 知道 接 下 来 是 什么 内 容 。 如 果 收 听 者 知道 
接 下 来 会 是 什么 内 容 ， 理 解 表格 信息 就 会 容易 一 些 。 
始终 尝试 使 用 <th> 元 素 指明 表 头 。 
始终 将 表 头 放 在 第 一 行 与 第 一 列 。 
避免 使 用 堪 套 表格 (比如 在 4.5 节 中 看 到 的 那个 ， 因 为 这 样 会 使 屏幕 阅读 器 使 用 者 难于 理解。 
避免 使 用 rowspan 与 colspan 特性 。 它们 使 屏幕 阅读 器 使 用 者 难于 理解 。 如 果 需 要 使 用 它们 ， 
应 确保 同时 使 用 scope 与 headers 特性 。 稍 后 会 进行 讨论 。 
e 了 解 语音 浏览 器 或 屏幕 阅读 器 如 何 朗诵 表格 以 及 它们 朗读 表格 单元 的 顺序 ,这 样 做 可 以 帮助 
理解 如 何 设计 表格 结构 ， 使 其 最 大 可 能 易于 使 用 (在 4.6.1 节 中 可 以 看 到 一 些 示 例 )。 
e@ ”如 果 使 用 scope 与 headers 特性 明确 指出 哪些 表 头 应 用 于 哪些 行 或 列 ， 屏 幕 阅读 器 可 以 帮助 
使 用 者 获取 特定 单元 的 表 头 。 例 如 ， 一 个 人 正在 听取 一 张 表格 的 内 容 ， 屏 幕 阅读 器 经 常会 
允许 使 用 者 选择 是 否 再 次 听取 与 该 单元 相关 联 的 表 头 信息 (不 需要 返回 第 一 行 或 该 列 中 的 第 
一 个 单元 ， 就 可 以 听取 与 该 单元 相对 应 的 表 头 信息 )。 
我 们 已 经 了 解 了 如 何 向 表格 中 添加 标题 ， 接 下 来 看 一 下 表格 是 如 何 向 使 用 者 朗读 的 ， 或 者 说 它 
们 是 如 何 被 “线性 化 ”的 。 


4.6.1 如 何 线性 化 表格 


一 个 屏幕 阅读 器 在 被 用 于 阅读 表格 时 ， 通 常会 对 其 进行 线性 化 。 意 思 是 说 ， 屏 幕 阅读 器 会 从 第 
一 行 起 ， 自 左 向 右 朗 读 行 中 的 单元 ， 一 个 接 一 个 ， 直 到 移动 到 下 一 行 之 前 ， 然 后 继续 这 样 读 ， 直 到 
屏幕 阅读 器 读 完 表格 中 的 每 一 行 。 例 如 下 面 简单 的 表格 : 

<table border="1"> 

<b> 


<td>Column 1. Row 1</td> 
<td>Column 2 Row 1</td> 
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[Column 1, Row 1[Column 2 Row 1 
[Column 1, Row 2|Column 2, Row 2 


图 4-12 简单 表格 的 效果 


图 4-12 中 单元 的 阅读 顺序 应 该 为 : 

® ColumnlRowl 

® Column2Row1 

® Columnl]Row?2 

® Column?2Row2 

这 个 简单 的 例子 很 容易 理解 。 但 想象 一 下 巨大 的 表格 ， 会 先 读 表 头 ， 之 后 是 每 行 的 数据 。 如 果 
表格 有 更 多 列 ， 将 很 难 记 住 正 位 于 哪 一 列 中 (更 粮 糕 的 是 ， 如 果 使 用 嵌 套 表格 ， 用 户 会 变 得 更 加 难以 
记 住 他 们 的 位 置 。 因 为 一 个 表格 单元 可 以 包含 整个 新 表格 ， 而 它 又 经 常 拥有 数量 不 等 的 行 或 列 )。 

幸好 ， 多 数 屏幕 阅读 器 能 够 提醒 用 户 他 们 当前 所 在 的 列 与 行 ， 只 是 当 表 格 使 用 <th> 元 素 作为 表 
头 时 会 工作 得 更 好 。 当 构建 复杂 表格 时 ， 还 可 以 使 用 id、scope 及 headers 特性 增强 这 一 信息 。 


4.6.2 ”使 用 id、scope 及 headers 特性 


id、scope 与 headers 特性 在 本 章 介绍 <td> 与 <th> 元 素 可 以 包含 的 特性 时 已 经 提 到 过 。 这 里 你 将 
看 到 它们 如 何 被 用 于 更 好 地 记录 表格 结构 ， 并 使 其 更 易于 访问 。 

在 创建 单元 表 头 时 ， 在 <th> 元 素 中 添加 scope 特性 有 助 于 指定 表 头 应 用 于 哪些 单元 。 如 果 赋值 
为 row， 就 表明 它 是 所 在 行 的 表 头 ， 而 如 果 赋 值 为 column， 就 表明 它 是 所 在 列 的 表 头 。scope 特性 
的 可 能 取 值 如 表 4-2 所 示 。 


表 4-2 scope 特性 的 可 能 取 值 


所 在 单元 包含 所 在 行 的 表 头 信息 
所 在 单元 包含 所 在 列 的 表 头 信息 


所 在 单元 包含 所 在 行 组 的 表 头 信息 。“ 行 组 ”是 位 于 由 <thead>、<tbody> 或 <tfoot> 创 建 的 行 中 的 单元 (不 


headers 特性 扮演 的 角色 与 scope 特性 正好 相反 ， 因 为 它 在 <td> 元 素 中 用 于 指定 哪些 表 头 对 应 于 
该 单元 。 该 特性 的 值 是 一 个 由 空格 分 隔 的 表 头 单元 id 特性 值 列表 。 从 下 例 中 可 以 知道 这 个 单元 的 表 
头 id 特性 值 应 该 分 别 是 income 和 ql。 

headers="income ql" 

这 个 特性 的 主要 目的 是 用 于 支持 语音 浏览 器 。 当 听取 一 个 表格 时 , 很 难 始终 记 住所 在 的 行 与 列 。 
因此 ，headers 特性 可 以 提醒 使 用 者 当前 单元 的 数据 属于 哪 一 行 及 哪 一 列 。 
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4.6.3 创建 易 访问 表格 


现在 我 们 已 经 具备 了 创建 易 访问 表格 的 工具 。 

例 4-2: 创建 一 个 易 访 问 表 格 。 

在 本 例 中 ， 为 Example Cafe 网 站 创建 一 个 新 页 面 ， 提 供 一 张 关于 周末 训 饪 课程 的 时 间 表 。 一 共 
两 天 ， 上 午 和 下 午 的 课程 如 图 4-13 所 示 。 


Ulimare brunch Course x 


© [filey///D:/hS+css3/HTMLS+CSS3/h5/ch03/Example%20Café/course.html 电 穴 


EXAMPLE CAFE 

BOME WENY RECIFES CONTACT 

Ultimate brunch Course 
Saturday 


Jiarning Baking bread: loaves, croissants and mffins. Eggs 4 ways: boiled, scranbled, poached, fried 
Afternoon Sweet treats; pancakes and waffles. Fry pan specials; Fritters and hash broms. 


图 4-13 关于 周末 京 饪 课程 的 时 间 表 


尽管 在 这 张 截图 中 看 不 到 ， 但 该 表格 被 特意 设计 成 面向 视觉 障碍 者 的 易 访问 表格 。 
(1) 建立 框架 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Ultimate brunch Course</title> 
</head> 
<body> 
<hl>EXAMPLE CAFE</h1l> 
<nav> 
<a href="index.html">HOME</a> 
<a href="menu.html">MENU</a> 
<a href="recipes.html">RECIPES</a> 
CONTACT 
</nav> 
<h2>Ultimate bninch Course</h2> 
<body> 
</html> 


(2) 这 个 表格 有 3 行 3 列 。 第 一 行 以 及 左 侧 一 列 包含 表 头 ， 因 此 使 用 < 了 b> 元 素 。 剩 余 表格 单元 
使 用 <td> 元 素 。 在 添加 这 些 元 素 的 同时 ， 也 为 表格 添加 一 些 内 容 : 
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<t> 
<th>Moming</th> 
<td>Sweet treats: pancakes and waffles.</td> 
<t> 
<t> 
<th>Aftemoon</th> 
<td>Eggs 4 ways: boiled, scrambled, poached, fried.</td> 
<td>Fry pan specials: Fritters and hash browns.</td> 
< 
</table> 
<body> 


(3) 下 一 步 是 为 具有 内 容 的 <th> 元 素 添加 id 特性 , 以 及 为 <td> 元 素 添加 headers 特性 以 指明 哪些 
表 头 应 该 应 用 于 这 些 元 素 。 这 种 方式 提高 了 对 于 屏幕 阅读 器 使 用 者 的 易 访 问 性 。headers 特性 的 值 应 
该 对 应 于 各 单元 相应 表 头 的 id 特性 值 : 


<table> 
<t> 
<th></th> 
<th id="Saturday" scope="col">Saturday</th> 
<th id="Sunday" scope="col">Sunday</th> 
<> 
<t> 
<th id="Moming" scope= row">Moming</ 由 > 
<td headers="Saturday Moming" >Baking bread: loaves.croissants and muffins.</td> 
<td headers="Sunday Moming" >Eggs 4 ways: boiled.scrambled poached fried </td> 
</> 
<b> 
<th id="Aftemoon" scope="row">Afternoon</th> 
<td headers="Saturday Aftemoon">Sweet treats:pancakes and waffles.</td> 
<td headers="Sunday Aftemoon">Fry pan specials:Fritters and hash browns.</td> 
</> 
</table> 


(4) 以 course.html 为 文件 名 保存 文件 。 这 个 例子 要 比 多 数 表格 复杂 一 些 。 很 少 有 人 尝试 过 在 
<table> 元 素 中 使 用 id 和 headers 特性 。 但 这 样 可 以 使 表格 对 于 视觉 障碍 者 容易 使 用 得 多 。 特 别 对 于 
拥有 很 多 列 与 行 的 大 型 表格 更 是 如 此 。 

过 特 性 与 headers 特性 的 组 合 使 屏幕 阅读 器 能 够 将 表 头 与 表格 数据 单元 联系 起 来 .通过 将 headers 
特性 的 值 与 对 应 关联 的 id 特性 的 值 相 匹配 ， 就 可 以 得 到 <td> 与 <th> 元 素 间 的 明确 连接 。 


侃 甩 刘 衫 


有 很 多 原因 需要 在 页 面 中 添加 列表 : 在 首页 中 列 出 最 喜欢 的 5 张 唱片 ， 或 者 包含 一 组 访问 者 应 
该 遵守 的 指导 等 。 
可 以 在 HIML 中 创建 如 下 3 种 类 型 的 列表 。 


107 


HTML5+CSS3 网 页 衣 计 己 倒 教程 


e 无 序列 表 : 比如 项 目 列表 。 

ee 有 序列 表 : 使 用 有 序数 字 或 字母 而 非 圆 点 。 

e 定义 列表 : 使 你 可 以 指定 术语 及 其 定义 。 

在 了 解 并 开始 使 用 列表 之 后 ， 可 以 产生 更 多 的 列表 用 例 。 


4.7.1 使 用 <ul> 元 素 创建 无 序列 表 


如 果 想 要 创建 一 个 项 目 列表 ， 应 该 将 其 写 在 <ul> 元 素 中 (“ul” 即 “unordered list”， 无 序列 表 之 
意 )。 需 要 写 下 的 每 一 项 或 每 一 行 都 应 该 位 于 开始 标签 <Hi> 和 结束 标签 <i> 之 间 (“1i” 即 “listitem”， 
列表 项 之 意 )。 

应 该 永远 关闭 <li> 元 素 。 虽 然 有 的 HTML 页 面 省 略 了 </li> 结 束 标签 ， 但 那 是 一 种 应 该 避免 的 不 
良 习 惯 。 
如 果 想 创建 一 个 项 目 列表 ， 可 以 通过 如 下 方式 : 
<u> 
<li>Bullet point number one</li> 
<li>Bullet point number two</li> 
<li>Bullet point number three</li> 
< 


在 浏览 器 中 ， 列 表 的 显示 效果 如 图 4-14 所 示 。 


mB Hoy po Io 


Here i an unocdered ist which is just a buleied st 


» Bulet point munber one 
。 Bullet point nvmober wo 
» Bulet pomt number three 


图 4-14 列表 的 显示 效果 


正如 之 前 所 承诺 的 ， 下 例 中 展示 了 一 个 链接 列表 ， 它 们 来 自 使 用 无 序列 表 重 写 过 的 <nav> 元 素 
示例 。 在 Web 页 面 中 ， 导 航 元 素 经 常 使 用 列表 进行 标记 ， 所 以 尽快 适应 这 种 模式 会 很 有 帮助 。 
<nav> 
< 
<li><a href="menu html">Menu</a></li> 
<li><a href="opening_times html">Opening Times</a></li> 
<li><a href-"contact.html">contact</a></li> 
<ul> 
<nav> 


<u> 和 <1i> 元 素 可 以 包含 所 有 通用 特性 以 及 UI 事件 特性 。 
4.7.2 ”有 序列 表 
在 有 序列 表 中 ， 不 是 在 每 项 前 放置 圆 点 ， 而 是 可 以 使 用 数字 (1、2、3)、 字 母 (A、B、C) 或 罗马 
数字 (it、 下 、 过 来 前 置 标识 它们 。 
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有 序列 表 项 位 于 <ol> 元 素 中 。 之 后 每 一 个 列表 项 都 应 嵌 套 于 <ol> 元 素 内 , 并 且 包 含 在 <li> 开 始 标 
签 和 </li> 结 束 标签 之 间 。 效 果 应 该 如 图 4-15 所 示 。 


Ee Ed Yew Hstory Boomaks JIoos Hep 


Here is an ordered lst using numbers 


1. Point mumber one 
2. Point number two 
3. Point mumber three 


图 4-15 有 序列 表 
在 有 关 使 用 CSS 设置 列表 样式 的 内 容 中 ， 将 介绍 如 何 为 有 序列 表 自 定义 序列 所 使 用 的 符号 
类 型 。 
1. 使 用 start 特性 修改 有 序列 表 的 起 始 数字 


如 果 想 指定 有 序列 表 的 起 始 数字 ， 可 以 通过 在 <ol> 元 素 中 使 用 start 特性 来 实现 。 该 特性 的 值 应 
该 是 起 始 项 所 对 应 的 序列 值 。 可 以 在 图 4-16 中 看 到 结果 。 
<ol start="4"> 
<li>Point number one</li> 
<li>Point number two</li> 
<li>Point number three</li> 
</o> 


2. 使 用 reversed 特性 反 转 有 序列 表 的 序号 


布尔 特性 reversed 可 以 反 转 有 序列 表 的 序号 ， 使 其 从 最 大 值 开始 向 最 小 值 倒数 ( 仅 Chrome 支持 
此 特性 )。 以 下 代码 示例 展示 了 该 特性 的 使 用 。 
<olreversed> 
<li>Point number one</li> 
<li>Point number two</li> 
<li>Point number three</li> 
</o> 
在 图 4-17 中 ， 可 以 看 到 序列 从 3 开始 倒数 。 


Hereis an ordered fist Here is an ordered isr 


5 3 Point mummber one 
4. Point number one 2 Point munber two 
5. Point number two 1. Peint somiber fhree 
6. Point number three 


图 4-16 使 用 start 特性 修改 有 序列 表 的 起 始 数字 图 4-17 序列 从 3 开始 倒数 
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3. 使 用 type 特性 指定 序列 标记 


type 特性 使 你 可 以 指定 有 序列 表 所 使 用 的 序列 标记 类 型 。 表 4-3 中 给 出 了 type 特性 的 取 值 。 如 
果 使 用 此 特性 ， 需 要 记 住 该 特性 的 取 值 是 大 小 写 敏感 的 。 


表 4-3 type 特性 的 取 值 


关键 字 描述 
1 小 数 (默认 ) 
a 小 写 拉丁 字母 
A 大 写 拉丁 字母 
i 小 写 罗马 数字 
大 写 罗 马 数字 
下 面 的 代码 示例 
<oltype="a"> 
<li>Point number two</li> 
<li>Point number three</li> 
<ol> 
在 图 4-18 中 可 以 看 到 ， 列 表 从 字母 “a” 开 始 排序 。 
Hereis an ordered lst 
a Point number one 
b Poirt number two 
¢. Point number three 
图 4-18 ”列表 从 字母 “a” 开始 排序 
4.7.3 定义 列表 


HIMLS 规范 定义 <dl> 的 含义 是 “描述 列表 ”。 这 比 “ 术 语 ” 和 “定义 ”的 范围 都 要 宽泛 一 些 。 
<d> 元 素 代表 一 个 描述 列表 ， 由 零 个 或 多 个 “术语 -描述 ”( 名 称 / 值 ) 组 构成 。 每 一 组 都 与 一 个 或 多 个 
“术语 /名 称 ”(<dfe> 元 素 的 内 容 ) 以 及 一 个 或 多 个 “描述 / 值 ”(<dd> 元 素 的 内 容 ) 相 关联 。 

定义 列表 是 一 种 特殊 类 型 的 列表 ， 它 的 列表 项 由 术语 和 随后 的 简短 文字 定义 或 描述 组 成 。 定 义 
列表 包含 在 <dl> 元 素 内 。 之 后 在 <dl> 元 素 内 部 包含 交 蔡 出 现 的 <d> 和 <dd> 元 素 。<dt> 元 素 的 内 容 是 
所 要 定义 的 术语 。<dd> 元 素 中 则 包含 之 前 <dt> 元 素 中 术语 的 定义 。 例如， 以 下 是 一 个 HTML 文档 中 
不 同 列表 类 型 的 定义 列表 : 

<d> 

<dPUnordered List</dt> 

<dd>A list of bullet points.</dd> 

<dt>Ordered List</dt> 

<dd>An ordered list of points, such as a numbered set of steps.</dd> 
<dPDefinition List</dt> 

<dd>A list oftemms and definitions.</dd> 
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<d> 
在 浏览 器 中 的 显示 效果 应 如 图 4-19 所 示 。 


图 4-19 定义 列表 
所 有 这 些 元 素 都 可 以 包含 通用 特性 以 及 TUT 事件 特性 。 


4.7.4 列表 绕 套 


可 以 在 一 个 列表 中 嵌 套 另 一 个 列表 。 例 如 ， 将 一 个 带 有 独立 序列 的 编号 列表 放 入 对 应 的 列表 项 
中 。 除 非 使 用 start 特性 另行 指定 起 始 序列 号 ， 否 则 每 个 嵌 套 列表 都 将 独立 排序 ， 并 且 应 该 将 每 个 新 
列表 都 置 于 一 个 <li> 元 素 内 : 


<li>Item 4.3</li> 


> 
<li>Item Five</li> 
<o> 


在 浏览 器 中 的 显示 效果 如 图 4-20 所 示 。 


图 4-20 ”列表 嵌 套 


FE 祝 栽 底 甩 宠 侍 


这 一 节 通 过 实例 来 进一步 介绍 如 何 使 用 表格 。 在 本 例 的 表格 中 显示 了 当天 主要 市 场 上 蔬菜 的 市 
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场 价格 信息 。 在 设计 时 ， 主 要 用 到 了 分 组 、 表 头 以 及 单元 格 合并 ， 放 入 了 单元 格 文字 和 图 片 信息 等 。 
例 4-3: 创建 表格 实例 ， 在 Google Chrome 中 浏览 ， 效 果 如 图 4-21 所 示 。 
页 面 中 的 表格 有 边框 ， 带 标题 ， 单 元 格 中 有 图 片 、 文 字 内 容 ， 有 合并 单元 格 。 代 码 如 下 : 


<!DOCTYPE HIML> 
<html> 
<head> 
<title> 表 格 应 用 </tidle> 
</head> 
<body> 
<table border="1"> 
<caption> 蔬 菜市 场 价格 表 </caption> 
<thead> 
<> 
<th> 蔬 菜 图 片 </th> 
<th> 计 量 单位 </th> 
<th> 东 市 场 </th> 
< 了 h> 西 市 场 </th> 
<th> 南 市 场 </th> 
<th> 北 市 场 </th> 
</> 
</thead> 
“<tbody> 
<h> 
<td><img src="images/tomato-icon png" width="60" height="60"/></td> 
<td>500 克 </td> 
<td>2.5 元 <ftd> 
<td>2.3 元 <ftd> 
<td>2.1 元 <td> 
<td>2.3 元 <htd> 


4 全 


<td><img sre="images/eggplant-icon.png" width="60" height="60"/></td> 
<td>500 克 </td> 
<td>1.6 元 </td> 
<td>1.7 元 </td> 
<td>19 元 <td> 
<td>1.6 元 <td> 


$$ 


<td><img src="images/pepper-icon png" width="60" height="60"/></td> 
<td>500 克 </td> 
<td>2.8 元 <td> 
<td>3.0 元 <ftd> 
<td>2.7 元 <ftd> 
<td>2.7 元 <htd> 
</tr> 
<t> 
<td><img src—"images/cabbage-icon png" width="60" height="60"/></td> 
<td>500 克 </td> 
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D st x 让 a 


© Ome/HIMLS+cssmskn. 站 四 日 


芒 茸 市场 价格 家 
| 荐 荣 图 片 计 旦 单位 | 东 市 场 西 市 场 | 南 市 场 | 北市 场 


>) so0 克 |25 元 |23 元 |21 元 3 元 
性 |500 克 | 元 17 元 13 元 | 6 元 
[3 500 训 |2.8 元 |3o 元 |27 元 |27 元 
| 加 so0% |21 元 2s |24 元 3 元 


[EM : 2016-07-24 


图 4-21 本 例 在 Google Chrome 中 的 浏览 效果 


到】 札 座 少 绑 


在 本 章 中 ,介绍 了 表格 在 创建 页 面 时 可 以 成 为 怎样 的 强大 工具 ， 以 及 所 有 表格 如 何 基于 一 种 网 
格 模式 ， 并 使 用 4 种 基本 元 素 : <table>， 包 含 每 一 个 表格 ; <tt>， 包 含 表 格 的 行 ，<td>， 包 含 表格 
数据 的 单元 ， 以 及 <th>， 包 含 表 头 的 单元 。 

本 章 还 介绍 了 如 何 添加 表 头 、 表 尾 以 及 表格 标题 。 现 在 可 以 让 单元 同时 跨越 列 与 行 。 然 后 介绍 
了 如 何 将 列 分 组 ， 这 样 就 可 以 保留 结构 ， 使 它们 可 以 共享 样式 与 特性 。 最 后 介绍 了 一 些 使 用 表格 时 
的 易 访问 性 问题 。 

在 进行 文字 排版 时 ， 经常 需要 用 到 列表 效果 。 在 本 章 中 , 介绍 了 如 何在 HTML 中 创建 如 下 3 种 
类 型 的 列表 。 

e 无 序列 表 : 比如 项 目 列表 。 

e 有 序列 表 : 使 用 有 序数 字 或 字母 而 非 圆 点 。 

e 定义 列表 : 使 你 可 以 指定 术语 及 其 定义 。 
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龟 考 个 组 乡 


1. 表格 的 <caption> 元 素 应 该 被 放置 于 文档 中 的 什么 位 置 ? 默认 情况 下 ， 它 在 哪里 显示 ? 
2. 屏幕 阅读 器 将 以 什么 顺序 将 图 4-22 所 示 表格 的 单元 读 出 ? 


Ee Edt Yew Hstory 让 = Jook bep 
[Emiy ack FEeank 
Per [Dominic [Am 
[momas [Angela [David 
图 4-22 表格 示例 

3. 在 Web 设计 中 ， 表 格 经 常 应 用 在 哪些 地 方 ? 

4. 试 述 <thead>、<tfoot> 以 及 <tbody> 元 素 的 作用 。 

5. 创建 以 下 列表 : 

@ 1 1/2 3/4 cupsricotta 

® 3/4cupmik 

@ 4eggs 

® 1 cup plain white flour 

@ 1] teaspoon baking powder 

® 75g 50g butter 

@ pinch of salt 
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图 片 与 富 媒 体 


20 世纪 90 年 代 中 期 ， 大 多 数 网 站 只 是 含有 文本 和 图 像 的 一 系列 相互 链接 的 文档 。 后 来 一 些 专 
利 插件 (包括 Future Splash、Real Player 和 Quick Time 等 ) 的 出 现 改变 了 Web 播放 领域 的 状况 。 Future 
Splash 被 Macromedia 收购 后 ，Macromedia 将 其 重 命名 为 Flash， 并 成 为 台式 机 上 无 处 不 在 的 插件 。 
Flash 提供 了 许多 开放 标准 缺失 的 功能 ， 如 视频 和 动画 等 ， 并 解决 了 跨 浏览 器 兼容 性 的 问题 。 

HIML5 以 及 Open Web( 开 放 Web) 的 兴起 预示 着 专利 模式 的 终结 。 本 章 通过 对 canvas 和 
SVG(Scalable Vector Graphics， 可 缩放 向 量 图 ) 做 简要 介绍 向 大 家 介绍 原生 的 视频 和 音频 。 本 章 将 介 
绍 如 何在 网 站 中 添加 图 片 、 动 画 、 音 频 以 及 视频 。 


本 章 的 学 习 目标 : 

如 何在 网 页 中 添加 图 片 

不 同类 型 的 图 片 格式 及 各 自 适 用 的 情况 

如 何在 网 页 中 添加 音频 及 视频 

了 解 所 有 关于 <video>、<audio> 以 及 <objec 人 > 元 素 的 内 容 
了 解 canvas 的 概念 和 用 法 

了 解 SVG 与 canvas 的 区 别 


Si 在 网 页 中 添加 图 片 


5.1.1 使 用 <img> 元 素 添加 图 片 

图 片 是 使 用 <img> 元 素 添加 到 网 站 中 的 。 该 元 素 必 须 包 含 两 个 特性 : sre 特 性， 表明 图 片 来 源 ; 
以 及 alt 特性 , 提供 对 图 片 的 描述 。 除 了 可 带 有 所 有 通用 特性 以 外 , <img> 元 素 还 可 以 包含 下 列 特性 : 
height、width、ismap、usemap 。 

例如 ， 下 面 这 行 代码 会 将 图 片 logo.g 让 添加 到 网 页 中 。 图 5-1 展示 了 该 图 片 在 浏览 器 中 的 效果 。 

<img src="logo.gif' alt="Wrox logo" > 
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图 5-1 图 片 在 浏览 器 中 的 效果 


1. src 特性 


sre 特性 告知 浏览 器 应 从 何 处 查找 图 片 。 它 的 值 是 一 个 URL， 同 链接 一 样 ， 该 URL 可 以 是 绝对 
URL， 也 可 以 是 相对 URL。 
<img sre="logo.gif" > 
网 站 中 的 图 片 可 以 存储 于 Web 服务 器 上 , 也 可 链接 引用 其 他 站 点 的 图 片 。 如 果 图 片 存储 于 本 地 
服务 器 上 ，sre 特性 的 值 一 般 是 相对 URL。 
在 网 站 中 要 单独 为 图 片 建 立 一 个 目录 或 文件 夹 。 如 果 网 站 规模 很 大 ， 则 要 为 不 同类 型 的 图 片 建 
立 不 同 的 文件 夹 。 例 如 ， 可 以 把 用 于 设计 界面 的 图 片 与 网 站 内 容 使 用 的 图 片 分 开 保存 。 
2. alt 特性 
在 每 一 个 <img> 元 素 中 都 应 该 使 用 alt 特性 ， 其 取 值 是 一 段 对 图 片 进行 描述 的 文本 。 
<img Src= "logo.gif' alt="Wrox Logo"> 
alt 特性 的 值 又 常 被 称 作 “alt 文本 ”， 基 于 以 下 原因 ， 该 特性 的 值 被 用 于 描述 图 片 。 
e@ 如 果 浏览 器 无 法 显示 图 片 ， 将 使 用 alt 文本 代 蔡 显示 。 
e@ 有 视力 障碍 的 Web 用 户 经 常 使 用 一 种 叫 作 “屏幕 阅读 器 ”的 软件 为 他 们 朗读 页 面 内 容 。 这 
种 情况 下 ，alt 文本 会 向 他 们 描述 看 不 到 的 图 片 。 
e@ 尽管 搜索 引擎 非常 智能 ， 但 它们 无 法 表述 或 索引 图 片 内 容 。 因 此 ， 提 供 蔡 代 文本 可 以 帮助 
搜索 引擎 索引 页 面 并 帮助 访问 者 找到 网 站 。 
有 时 候 图 片 并 不 表达 任何 信息 ， 而 仅 用 于 增强 页 面 布局 。 这 种 情况 下 ， 仍 然 需 要 使 用 al 特性 ， 
但 不 需要 赋值 。 例 如 ， 有 一 幅 图 片 ， 只 是 一 个 装饰 性 元 素 ， 而 不 向 页 面 中 添加 任何 信息 : 
<img src="stripy page_divider gif alt="" > 
装饰 性 元 素 通常 最 好 使 用 CSS 处 理 。 
3. height 与 width 特性 


height 与 width 特性 指定 图 片 的 高 度 与 宽度 。 这 两 个 特性 的 值 一 般 以 像素 为 单位 显示 。 

<img src="logo.gif' alt="Wrox Logo" height="120" width="180" > 

指定 图 片 尺寸 可 以 使 页 面 更 快 、 更 平滑 地 得 到 加 载 ， 因 为 浏览 器 知道 应 该 为 图 片 分 配 多 大 的 空 
间 , 因此 可 以 在 图 片 还 在 载 入 的 同时 准确 泻 染 页 面 其 他 部 分 。 即便 因为 某 些 原因 图 片 没有 加 载 成 功 ， 
浏览 器 也 仍然 会 显示 一 个 符合 给 定 高 度 和 宽度 的 空 方 框 ， 并 且 在 其 内 部 显示 alt 文本 。 
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另外 ， 这 些 特性 的 值 还 可 以 是 浏览 器 屏幕 或 包含 元 素 的 百分比 。 但 是 以 任意 尺寸 显示 图 片 而 非 
使 用 创建 时 的 原始 尺寸 ， 可 能 会 导致 图 片 扭曲 或 模糊 。 甚 至 可 以 。 AAA 
通过 指定 与 高 度 不 同比 例 的 宽度 来 使 图 像 变 形 。 Fmd si vith 130beiga 130 

图 5-2 展示 了 一 张 图 片 在 实际 尺寸 下 (130 像素 X130 像素 )、 
被 放大 后 (width 特性 被 赋予 160 像素 ) 以 及 变形 后 (width 特性 被 赋 © 
予 80 像素 ， 而 height 特性 被 赋予 150 像素 ) 的 显示 效果 。 

以 下 是 本 例 的 代码 : 


<p>Fixed size: width 130 height 130</p> @ 
<img sre="images/apple jpg" alt="Photo ofred apple" width="130" height="130"> 

<p>Enlarged: width 160 (no height specified)</p> eter 
<img sre="images/apple jpg" alt="Photo of red apple” width="160" > 
<p>Stretched: width 80 height 150</p> 

<img sre="images/applejpg" alt="Photo of red apple" width="80" height="150" > 0 


Eeera wt 160 fp eight speried) 


4. 在 网 页 中 添加 图 片 图 5-2 图 片 的 模糊 或 变形 


下 面向 咖啡 馆 示例 中 添加 一 些 图 片 。 需 要 为 咖啡 馆 添加 徽标 以 及 一 张 表 示 供 应 特别 早餐 的 图 片 。 
现在 ， 使 用 文本 编辑 器 或 网 页 编写 工具 打开 首页 ， 并 按照 以 下 步骤 操作 。 

(1) 使 用 位 于 同一 应 用 中 images 文件 夹 内 的 logo.gif 蔡 换 <h1> 标 题 : 

<img sre—"images/logo.gif’ alt="example cafe logo" width="194" height="80" > 

(2) sre 特性 指明 图 片 的 URL 地 址 。 本 例 中 的 URL 全 部 为 相对 URL， 它 们 指向 示例 页 面 所 在 文 
件 夹 中 名 为 image 的 目录 。 

(3) 在 导航 栏 之 后 和 <h2> 元 素 之 前 ， 加 入 以 下 代码 : 

<img sre—"images/scrambled eggsjpg" width="622" height="370" alt-"Photo of scrambled eggs on an English muffin" > 

(4) width 以 及 height 特性 告知 浏览 器 应 以 多 大 尺寸 显示 图 片 。 

(5) 保存 文件 并 在 浏览 器 中 打开 ， 效 果 如 图 5-3 所 示 。 


5.1.2 ”使 用 图 片 作为 链接 
将 图 片 转换 为 链接 很 简单 。 与 将 文本 置 于 开始 标签 <a> 和 结束 标签 <a> 之 间 相同 ， 图 片 链接 只 需 


117 


HTML5+CSS3 网 页 设计 己 倒 教程 


要 将 一 幅 图 片 放置 于 这 些 标签 内 。 图 片 经 常 被 用 于 创建 图 形 化 按钮 或 到 其 他 页 面 的 链接 , 如 下 所 示 : 
<a href="http://www.wrox.com"> 
<img sre="images/wrox._ Logo.gif’ alt="Wrox Logo" width="338" height ="79" > 
<a> 
可 以 从 图 5-4 中 看 到 效果 。 这 幅 截 图 是 刻意 从 正 中 截取 的 ， 旨 在 展示 正 是 如 何在 <a> 元 素 内 的 
任何 图 片 周围 都 画 上 蓝 色 ( 在 黑白 图 片 中 表现 为 灰色 ) 边 框 的 。 在 HTML 规范 中 ， 没 有 任何 规定 指出 
在 图 片 链接 周围 应 该 有 一 个 边框 ， 而 且 也 没有 其 他 任何 浏览 器 这 么 做 。 


Programmer to Programmer 


日 my mp 


图 5-4 使 用 图 片 作为 链接 
这 个 边框 看 起 来 不 太美 观 ， 因 此 可 以 使 用 CSS 指定 <a> 元 素 中 的 任何 <img> 元 素 都 没有 边框 。 


5.1.3 选择 正确 的 图 片 格式 


选择 正确 的 图 片 格式 以 及 正确 保存 图 片 将 确保 网 站 不 会 出 现 不 必要 的 加 载 缓慢 现象 ， 而 且 访 问 
者 也 会 因此 更 乐于 访问 网 站 。 

Web 上 大 多 数 的 静态 图 片 被 归 类 为 “点 阵 图 像 ”。 点 阵 图 像 将 图 片 分 解 到 由 像素 组 成 的 网 格 中 ， 
并 分 别 为 每 个 像素 指定 色彩 。 如 果 凑 近 看 计算 机 屏幕 ， 会 看 到 构成 屏幕 的 像素 。 点 阵 图 像 有 多 种 不 
同 的 格式 ， 常 见 的 包括 JPEG、GIF、TIFF、PNG 以 及 命名 极 易 混 淆 的 “位 图 ”( 又 叫 BMP)。 

图 5-5 展示 了 一 张 点 阵 图 像 ， 其 中 一 部 分 被 修改 过 ， 从 而 能 够 看 到 图 片 是 如 何 由 像素 构成 的 。 


5-5 点 阵 图 像 


图 片 中 每 平方 英寸 的 像素 数 被 称 为 图 片 的 “分 辨 率 ”。Web 上 的 图 片 ， 正 常情 况 下 会 以 每 平方 
英寸 72 像素 的 分 辩 率 保存 ， 因 为 这 与 计算 机 屏幕 上 每 平方 英寸 的 像素 数 相当 。 相 对 地 ,用 于 打印 的 
图 片 通常 会 以 每 平方 英寸 300 个 色 点 提供 给 打印 机 。 

一 幅 图 片 每 平方 英寸 包含 的 像素 或 色 点 越 多 , 文件 尺寸 就 越 大 (以 KB 计 )。 文 件 越 大 , 用 于 Web 
传输 的 时 间 就 越 长 。 因 此 ，Web 上 使 用 的 任何 图 片 都 应 该 以 每 平方 英寸 72 个 色 点 的 分 辩 率 保存 。 

浏览 器 通常 支持 三 种 常见 的 点 阵 图 像 格式 ， 而 且 大 多 数 图 像 处 理 程序 也 以 这 些 格式 保存 图 片 。 

e@ GIF: Graphics Interchange Format( 图 形 交 换 格式 ， 读 作 “gif” 或 “jif”)。 
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e ”JPEG: Joint Photographic Experts Group( 联 合 图 像 专家 组 格式 ， 读 作 “jay-peg”)。 
®@ ”PNG: Portable Network Graphics( 便 携 式 网 络 图 像 格 式 ， 读 作 “pee-en-gee” 或 “ping”)。 


HTMLS5 的 视频 


有 人 说 Web 的 未 来 是 视频 。 因此 ， 对 于 一 般 用 户 而 言 ， 肯定 需要 一 种 包括 视频 内 容 的 简单 可 靠 
的 方式 ， 而 不 必 投 资 昂 贵 的 专利 软件 。HTMLS5 恰好 满足 所 需 ， 只 需要 直接 在 浏览 器 中 采用 一 行 标 
记 即 可 。 
用 object 标签 为 网 站 添加 视频 ， 要 使 用 如 下 这 种 复杂 的 嵌入 式 代码 : 
<object width="640" height="385"> 
<param name="movie" value="http://www.youttibe.cony/v/24FNE6OFRzwéhl=en_ GB&fs=18."> 
</param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<embed src="http://www youtube com/v/24FNE6OFRzw&hl-en GB&fs=1&e" 
allowfullscreen="true" width="640" height="385"> 
</embed> 
</object> 
HTMLS 不 仅 能 够 更 具 语义 ， 而 且 使 得 向 网 站 添加 视频 所 需要 的 标记 简化 为 : 
<video src="gordoinspace.webm"></video> 
默认 情况 下 ， 浏 览 器 不 会 显示 任何 播放 控件 ， 用 户 需 要 打开 上 下 文 菜单 ( 右 击 或 cmd+ 单 击 ) 来 使 
用 这 一 标记 播放 视频 ， 这 不 是 很 直观 。 如 果 未 明确 设置 视频 的 宽度 和 高 度 ， 在 浏览 器 计算 其 尺寸 时 ， 
会 在 页 面 加 载 时 看 到 一 幅 干扰 图 像 一 闪 而 过 。 而 且 ， 用 户 对 他 们 要 看 的 内 容 无 法 进行 快 进 。 为 了 改 
进 这 种 状况 ， 可 以 添加 poster 和 controls 特性 并 指定 尺寸 。 
<video src="gordoinspace webm" width="720" height="405" poster="poster jpg" controls> 
</video> 
在 Chrome 中 应 该 看 到 如 图 5-6 所 示 的 内 容 。 
然而 ， 标 准 的 全 局 特性 包括 poster 和 controls， 
不 只 是 可 用 特性 。 
HTMLS5 中 定义 的 标准 的 全 局 特性 如 下 。 
eautoplay( 自 动 播放 ): 告诉 浏览 器 ， 视 频 一 
旦 下 载 就 开始 播放 。 
e@ controls( 控 件 ): 显示 浏览 器 原生 的 内 置 控 
件 。 基 本 控件 包括 : 播放 /暂停 按钮 、 定 时 
器 、 音 量 控制 以 及 时 间 刷 等 。 
@ ”crossorigin( 跨 源 域 共享 ): 允许 或 禁止 使 用 CORS(Cross-Origin Resource Sharing, 跨 源 域 共享 ) 
对 视频 进行 跨 域 共享 。 
® height( 高 度 ): 标识 视频 的 高 度 (高 / 宽 比 若 不 当 , 会 在 视频 的 上 下 看 到 黑色 条 带 , 但 不 会 变形 )。 


图 5-6 ”Chrome 中 显示 的 基本 <video> 元 素 
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@ ”loop( 循 环 ): 告诉 浏览 器 ， 视 频 结束 后 循环 播放 。 
e@ mediagroup( 媒 体 组 ): 通过 创建 媒体 控制 器 ， 可 以 将 多 个 媒体 元 素 链接 在 一 起 。 因 此 ， 可 以 
对 多 个 视频 或 视频 与 音频 进行 同步 。 
e mnuted( 静 音 ): 让 作者 指定 视频 开始 时 是 否 静 音 。 
@ ”poster( 贴 画 ): 标识 一 幅 静 态 图 像 的 位 置 以 作为 定格 帧 。 
e@ ”preload( 预 载 ): 让 作者 能 够 通知 浏览 器 页 面 加载 后 是 否 立 刻下 载 视频 。preload 己 经 代 蔡 了 
autobuffer( 自 动 缓冲 ) 特 性 。 如 果 使 用 autoplay， 该 特性 能 够 覆盖 为 preload 设置 的 值 。 可 用 的 
状态 如 下 : 
”none( 无 ): 告诉 浏览 器 不 要 预 载 文件 。 当 用 户 单 击 Play( 播 放 ) 时 ， 再 开始 加 载 。 
”metadata( 元 数据 ): 告诉 浏览 器 只 预 载 元 数据 (尺寸 、 首 帧 、 视 频 长 度 等 )。 当 用 户 单 击 Play 
时 ， 开 始 加 载 文 件 的 其 余部 分 。 
4 ”auto( 自 动 ): 由 浏览 器 决定 是 否 下 载 整个 文件 、 什 么 也 不 下 载 或 只 下 载 元 数据 。 这 是 未 指 
定 preload 时 的 默认 状态 。 
@ src( 源 地 址 ): 标识 视频 文件 的 位 置 (注意 ， 当 有 子 元 素 source 时 ， 该 特性 不 是 必需 的 ， 稍 后 
讨论 )。 
e ”width( 宽 度 ): 标识 视频 的 宽度 ( 若 高 / 宽 比 不 当 ， 会 在 视频 上 下 看 到 黑色 条 带 ， 但 不 会 变形 )。 
loop、autoplay、preload 以 及 controls 都 是 Boolean( 布 尔 型 ) 特 性 ， 意 即 若 代码 中 有 此 关键 字 ， 则 
其 值 为 tue。 因 此 ， 如 果 编 写 XHTML 文档 ， 则 应 将 controls 写成 controls="controls"。 

有 些 浏览 器 尚 不 支持 <video> 元 素 或 尚 无 专用 的 编 解 码 器 支持 , 但 可 以 以 链接 的 形式 提供 备用 内 
容 以 便 下 载 视 频 ， 让 这 些 浏览 器 实现 优雅 降级 。 这 是 由 于 浏览 器 对 于 无 法 识别 的 HIMLS 元 素 ， 总 
会 将 这 些 元 素 中 的 内 容 显示 出 来 。 

<video sre="gordoinspace. webm width="720" height="405" poster="poster jpg" controls> 

Download <a hreE-"gordoinspace webm>Gordo in Space</a> the movie 

</video> 


5.2.1 视频 格式 


最 关键 的 是 视频 格式 和 编 解码 器 。 在 深入 了 解 各 浏览 器 支持 的 编 解码 器 之 前 ， 先 简要 介绍 一 下 
视频 容器 与 编 解码 器 之 间 的 区 别 。 


1. 视频 容器 


用 以 关联 视频 的 文件 扩展 名 有 .mp4、.avi 以 及 .flv 等 ， 它 们 本 身 并 不 是 编 解码 器 ， 而 是 一 种 容器 
格式 。 如 同 ZIP 或 RAR 文件 能 够 在 其 中 容纳 数 种 文件 类 型 一 样 ， 视 频 容器 格式 所 做 的 也 是 同样 的 
事情 。 应 该 将 容器 格式 视 为 “如 何 存储 数据 ”， 而 将 编 解码 器 视 为 “如 何 理解 和 播放 数据 ”。 

这 些 容器 需要 包括 多 个 轨道 ， 一 般 至 少 有 一 个 用 于 视频 ， 另 一 个 用 于 音频 。 这 些 轨道 是 由 包含 
在 音频 轨道 中 的 记号 进行 同步 的 。 也 可 以 有 多 个 不 同 语言 的 音频 轨道 或 字幕 轨道 。 容 器 也 可 能 包含 
相关 的 元 数据 ， 这 些 元 数据 可 能 包括 视频 标题 或 章节 点 等 。 

为 了 实现 跨 浏览 器 的 HIML5 视频 ， 需 要 了 解 三 种 容器 格式 。 

e@ WebM: 一 种 加 入 HIMLS 家 族 的 最 新 容器 格式 。 它 是 Google 收购 On2 Technologies 之 后 ， 

在 2010 年 的 Google IO 会 议 上 宣布 的 。 它 基于 Matroska 容器 格式 ， 是 为 了 与 开源 的 VP8 
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2 


视频 编 解码 器 和 Vorbis 音频 编 解码 器 配套 使 用 而 设计 的 。YouTube 支持 这 种 WebM 格式 ， 
假如 已 同意 参与 其 HIMLS 实验 计划 , 并 且 正 在 使 用 兼容 的 浏览 器 , YouTube 便 可 以 为 你 提 
供 这 种 格式 的 视频 。 

Ogg: 一 种 无 任何 专利 约束 的 开放 标准 容器 格式 ， 由 Xiph.Org Foundation(Xiph.Org 基金 会 
维护 。Ogg 的 视频 编 解码 器 叫 作 Theora， 配 套 的 音频 编 解 码 器 为 Vorbis。 

MPEG4: 基 于 Apple 的 QuickTime 容器 格式 MOV, 关联 的 文件 扩展 名 是 mp4 和 .m4v。MPEG4 
的 消极 面 是 专利 障碍 ， 这 可 能 意味 着 用 户 从 2016 年 起 将 不 得 不 支付 版 权 费 。MPEG4 使 用 
了 .264 视频 编 解码 器 。 


编 解 码 器 


编 解码 器 种 类 繁多 ， 主 要 有 以 下 三 种 。 


5.2.2 


VP8: 一 种 开放 的 视频 编 解码 器 ， 没 有 任何 已 知 的 专利 障碍 ， 由 Google 拥有 ， 是 由 Google 
收购 的 On2 Technologies 公司 创建 的 。 其 视频 质量 类 似 于 H264， 预 计 在 未 来 几 年 将 会 得 到 
进一步 发 展 。 

Theora: 最 初 也 是 由 On2 Technologies 创建 的 ， 但 现在 由 Xiph.org 基金 会 开发 。 和 VP8 一 
样 ， 它 是 免 版 税 的 ， 而 且 没有 任何 已 知 的 专利 障碍 。Theora 等 同 于 VP3， 一 般 和 Ogg 容器 

-起 使 用 ， 但 它 的 质量 远 低 于 VP8 和 H.264。 

H264: 由 MPEG 团体 开发 ， 设 计 目 标 是 以 相 比 以 前 标准 还 低 的 比特 率 创建 高 质量 的 视频 。 
H.264 可 以 被 划分 成 不 同 的 配置 文件 以 迎合 不 同 设备 , 因此 桌面 设备 可 以 要 求 比 移动 设备 更 
高 的 配置 文件 。 它 可 以 和 大 多 数 容器 格式 一 起 使 用 (通常 为 MPEG-4), 但 不 足 是 受 MPEG-LA 
专利 保护 限制 。 


浏览 器 支持 


主流 浏览 器 全 都 支持 HTMLS5 视频 。 表 5-1 显示 了 HIMLS 视频 格式 的 兼容 性 。 


表 5-1_HTML5 视频 格式 的 兼容 性 


5.2.3 


林 


添加 视频 源 
使 用 source 元 素 


现在 有 了 经 过 三 次 编码 的 视频 , 但 对 于 目前 的 video 元 素 , 只 能 添加 sre 特性 。 可 以 用 JavaScript 
来 检测 浏览 器 的 支持 情况 ,并 用 相应 的 文件 对 之 进行 服务 。 不 过 , 更 保险 的 办 法 是 使 用 source 元 素 。 

source 能 够 指定 用 于 媒体 元 素 的 多 个 可 选 视频 (使 用 audio 时 则 是 音频 )。 这 是 一 个 不 可 见 元 素 ， 
意 即 浏览 器 不 会 泻 染 它 的 内 容 ， 以 指示 它 在 文档 中 的 可 见 性 外 观 。 
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<video poster="poster jpg” controls width="720" height="405"> 

<source ste="gordoinspace mp4" type="video/mp4"> 

<source sre="gordoinspace. webm" type="video/vp8"> 

<source src="gordoinspace ogv" type="video/oge”> 

Download <a href="gordoinspace. webm>Gordo in Space</a> the movie. 
<video> 


注意 上 述 代码 如 何 用 相应 的 type 特性 来 添加 三 个 source 元 素 ， 以 迎合 各 种 浏览 器 。 
注意 : 
不 要 混用 source 元 素 的 src 特性 。 


现在 已 去 掉 video 元 素 的 sre 特性 ， 因 为 使 用 了 子 元 素 source。 下 载 视频 的 链接 仍 保留 着 , 主要 是 
为 了 方便 那些 可 能 在 用 纯 文本 浏览 器 或 其 他 设备 进行 浏览 的 用 户 ， 这 种 用 户 只 能 先 把 视频 文件 下 载 到 
本 地 ， 然 后 用 合适 的 视频 播放 器 进行 观看 。 

如 果 未 对 source 元 素 添加 fype 特性 , 浏览 器 会 下 载 各 个 文件 的 一 小 部 分 ， 从 而 识别 出 其 编 解码 
器 是 否 支持 。 因 此 ， 对 每 个 视频 源 都 应 该 确保 使 用 了 type 特性 。 


注意 : 

在 对 Ogg Theora 编码 的 视频 使 用 type 特性 时 ， 必 须 将 它 指定 为 video/ogg 而 不 是 video/ogv( 最 
后 一 个 字母 是 g 而 不 是 Vv)。 这 让 我 们 出 现 了 好 几 次 这 样 的 错误 ， 引 起 混乱 的 原因 是 这 种 文件 类 型 的 
扩展 名 为 .ogv。 


浏览 器 将 播放 第 一 个 可 理解 格式 的 视频 。 举 例 来 说 ， 在 Chrome 6 中 ， 它 能 够 播放 所 有 格式 ， 因 
此 它 会 播放 上 例 中 的 MP4 文件 。 如 果 浏 览 器 不 能 理解 视频 的 类 型 ， 那 么 会 简单 地 跳 到 下 一 个 source 
元 素 ， 直 到 发 现 能 够 理解 的 类 型 为 止 。 

source 元 素 的 顺序 相当 重要 : MP4 必须 放 在 第 一 位 ， 因 为 旧式 的 iPad 只 审查 一 个 source 元 素 ， 
新 版 的 iPad 已 解决 。WebM 应 放 在 第 二 位 ， 这 是 由 于 它 的 质量 高 于 Ogg， 这 样 可 确保 Opera 10.6+ 
和 Firefox 4+ 会 播放 WebM 而 不 是 Ogg。Ogg 放 在 第 三 位 ， 以 支持 Opera 10.5 和 Firefox 3.5/3.6。 随 
着 时 间 的 推移 ， 已 经 不 必 使 用 Ogg 对 视频 进行 编码 了 ， 因 为 当前 使 用 这 一 格式 的 新 版 浏览 器 也 支持 
高 质量 的 WebM。 三 种 视频 编码 以 及 添加 三 个 source 元 素 已 让 我 们 涵盖 了 许多 浏览 器 和 平台 , 但 IE6、 
正 7 以 及 IE8 又 会 怎样 呢 ? 


注意 : 

根据 用 户 的 服务 器 配置 ， 也 许 不 能 播放 视频 。 如 果 是 在 Apache 服务 器 上 ， 需 要 指定 视频 的 服 
务 方式 。 可 以 在 htaccess 文件 中 加 入 以 下 几 行 : 

AddType video/webm .webm 

AddType video/ogg .ogg 

AddType video/mp4 mp4 

同时 ， 可 能 对 audio 元 素 也 要 做 同样 的 事情 。 

AddType audio/webm webm 

AddType audio/ogg .oga 

AddType audio/mp3 .mp3 
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2. 使 用 Flash 支持 旧版 IE 


虽然 开放 标准 取代 Flash 等 专利 技术 是 大 势 所 趋 ,但 现在 还 需要 Flash 来 帮助 支持 旧版 的 Internet 
Explorer。 可 用 的 Flash 视频 播放 器 有 很 多 ， 以 下 示例 使 用 了 非 商业 版 的 JW Player。 在 script 链接 
之 后 提供 的 默认 代码 如 下 。script 链接 是 指 页 面 的 <head> 元 素 中 的 <script> 标 记 ， 用 以 链接 一 些 页 面 
所 需 的 脚本 或 脚本 库 。 


<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name= "player" width="720" height="429"> 
<param name="movie" value="player.swf" /> 
<param name="allowfullscreen" value="true" /> 
<param name="allowscriptaccess" value="always" /> 
<param name="flashvars" value="file=gordoinspace.mp4&-image=poster.jpg" /> 
<embed type="application/x-shockwave-flash” id="player2" name="player2" src="player.swf" width="720" 
height="429" allowscriptaccess="always" allowfullscreen="true" flashvars="file=file= gordoinspace.mp4&image= posterjpg" /> 
‘</object> 
通过 将 上 述 这 种 Flash 的 object 元 素 与 前 面 的 示例 结合 在 一 起 ， 就 有 了 一 种 可 访问 的 、 跨 浏览 
器 的 、 原 生 的 解决 方案 。 在 object 元 素 内 部 还 要 用 一 个 img 元 素 以 提醒 尚未 安装 Flash 插件 的 用 户 ， 
完整 的 文档 示例 如 下 : 


<!DOCTYPE HIML> 
<html lang="en-UK"> 
<head> 
<meta charset="UTF-8"> 
<title>Gordo in Space</title> 
‘<script sre="js/jwplayerjs"></script> 
<script src="js/swfobjectjs"></script> 
</head> 
<body> 
<hl>Gordo in Space</h1> 
<video poster=" posterjpg" controls width="720" height="405"> 
<source strc="gordoinspace.webm" type="video/vp8" /> 
<source strc="gordoinspace.mp4" type="video/mp4" /> 
<source src="gordoinspace.ogV'" type="video/ogg" /> 
‘<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player' width="720" height="429"> 


<param name="flashvars" value="file=gordoinspace.mp4&-image=poster.jpg" /> 
<embed 
type="application/x-shockwave-flash" 
id="player2" 

name="player2" 

src="player.swf" 

width="720" 

height="429" 
allowscriptaccess="always”" 
allowfullscreen="true”" 

户 


123 


HTML5+CSS3 网 页 设计 己 倒 教程 


<img sre="poster jpe” title="No video playback capabilities, please download the video below"> 
<p>Your browser doesn't support video, please <a href="gordoinspace.webm">download it</a>.</p> 
</object> 

</video> 

<body> 

</html> 


5.2.4 track 元 素 


source 并 不 是 可 用 于 原生 视频 的 唯一 元 素 。 还 有 后 来 加 入 HTMLS5 规范 的 track 元 素 以 及 与 之 关 
联 的 API 一 一 Text Track API, 目的 是 为 视频 或 音频 指定 外 部 的 同步 轨道 或 数据 .track 只 能 用 作 video 
或 audio 媒体 元 素 的 子 元 素 ， 用 法 如 下 所 示 : 

<video ste="gordoinspace. webm" width="720" height="405" poster="posterjpg" controls> 

<track kind="subtitles" sre="gordo_subtitles.vtt" /> 
</video> 


1. track 元 素 的 特性 


track 元 素 可 以 采用 以 下 特性 。 

e@ default( 默 认 ): 以 其 中 使 用 该 特性 的 track 元 素 为 默认 轨道 ， 除非 用 户 的 喜好 已 指示 有 另 一 个 
更 合适 的 track 元 素 。 

e@ kind( 种 类 ): 描述 track 元 素 提供 的 信息 类 型 ， 可 以 采用 以 下 值 ( 若 未 指定 值 ， 默 认 使 用 
subtitles)。subtitles( 字 幕 ): 对 话 的 副本 或 翻译 文本 ， 会 营 加 显示 在 视频 上 。captions( 简 短 说 
明 ): 类 似 于 subtitles， 但 也 可 以 包含 声音 效果 或 其 他 相关 音频 信息 ， 适 用 于 音频 不 可 用 时 ， 
会 营 加 显示 在 视频 上 。descriptions( 描 述 )， 为 视频 不 可 用 时 提供 媒体 元 素 的 文本 描述 (例如 ， 
当 用 户 正在 使 用 屏幕 阅读 器 时 )。chapters( 章 节 ): 定义 章节 标题 ， 以 便 对 媒体 元 素 的 内 容 进 
行 导航 。metadata( 元 数据 ): 包括 媒体 元 素 的 信息 和 内 容 ， 默 认 情 况 下 不 会 显示 给 用 户 。 如 
果 愿 意 ， 可 以 用 JavaScript 暴露 这 些 信 息 。 

e@ ”label( 标 签 ): 为 文本 轨道 定义 用 户 可 读 的 标题 。 在 同一 媒体 元 素 内 ， 具 有 同样 kind 特性 的 每 
个 track 元 素 的 label 必须 唯一 。 

e src( 源 地 址 ): 文本 轨道 数据 的 URL。 

e@ srclang( 源 语言 ): 文本 轨道 数据 的 语言 。 

下 面 是 一 个 具有 多 种 语言 英语、 法 语 和 德语 ) 字 幕 的 示例 。 

<video sre="gordoinspace. webm width="720" height="405" poster="poster jpg" controls> 
<track kind="subtitles" sre—"gordo_subtitles_en.vtt" srclang—"en" label="English” /> 
<track kind="subtitles" sre—"gordo_subtitles_de.vtt" srclang—"de" label="Dentsch” /> 
<track kind="subtitles" sre—"gordo_subtitles fi.vtt" srclang—"fi" label—" Frangais” /> 

</video> 

track 元 素 对 视频 具有 内 置 的 且 可 互 操作 的 可 访问 性 , 但 目前 尚未 得 到 任何 浏览 器 的 支持 。 因此 ， 

最 好 的 变通 方法 是 使 用 JavaScript 来 提供 支持 。 
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2. WebVTT 文件 


前 面 的 例子 中 ,文件 扩展 名 为 “vtt”， 这 是 一 种 WebVIT(Web Video Text Tracks，Web 视频 文 
本 轨道 ) 文 件 格式 ， 用 于 标记 外 部 文本 轨道 。 该 格式 以 前 称 为 WebSRT(Web Subtitle Resource Tracks， 
Web 字幕 资源 轨道 )， 该 格式 颇具 争议 ， 因 为 它 与 至 少 50 多 种 其 他 同步 文本 格式 具有 对 抗 性 。 所 有 
主流 浏览 器 都 在 计划 支持 WebVTT， 微 软 还 宣布 也 会 支持 TTML(Timed Text Markup Language， 时 
控 的 文本 标记 语言 )。 

WebVIT 文件 是 十 分 简单 的 文本 文件 ， 含 有 许多 “线索 ”， 这 些 线索 用 来 辨别 文本 出 现 的 时 间 
以 及 显示 什么 样 的 文本 。 每 个 线索 有 唯一 的 ID 号 ， 并 且 必 须 单独 成 行 。 一 个 简单 的 WebVTT 文件 
如 下 所 示 ( 注 意 ， 合 法 WebVTT 文件 的 第 一 行 必须 是 WEBVTT): 


WEBVTT 

1 

00:00:01.000 --> 00:00:10.000 

The first lot of subtitles displays from 1 to 10 seconds 
2 

00:00:15.000 --> 00:00:20.000 

The next line displays from 15 to 20 seconds 

and can run onto two lines 


应 该 注意 到 ， 每 个 线索 的 时 间 格 式 是 hh:mm:ss:ms( 时 :分 : 秒 :毫秒 )。 也 可 以 围绕 文本 封装 一 些 内 
联 的 定时 器 ， 以 使 它们 以 卡拉 OK 的 风格 按 顺 序 出 现 ， 如 下 所 示 : 


WEBVIT 

1 

00:00:01.000 --> 00:00:10.000 

The first lot of subtitles <00:00:03.000> displays from <00:00:07.000>1 to 10 seconds 


可 以 有 选择 地 设置 字幕 的 样式 ， 可 以 用 <b> 表 示 粗 体 、 用 <i> 表 示 斜 体 、 用 <u> 表 示 下 划 线 ， 并 
用 <mby> 和 <rf> 表 示 错 误 和 muby 文本 。 也 可 以 用 <c.className> 定 义 class， 以 便 能 够 用 它 设置 文本 的 
样式 。 最 后 ， 使 用 <v> 可 以 定义 与 文本 相关 联 的 声音 。 格 式 为 : <v Speaker Name >(<v 说 话 人 姓名 >)， 
于 是 会 泻 染 出 说 话 人 的 姓名 以 及 字幕 。 让 我 们 看 一 个 包含 这 些 标签 的 示例 。 


WEBVIT 

1 

00:00:01.000 --> 00:00:05.000 

<v James Misson Control>Gordo are you ready for takeoff? 

2 

00:00:05.000 --> 00:00:08.000 

<v Gordo><i>Laughs uncontrollably</i> 

3 

00:00:08.000 --> 00:00:16.000 

<v James Mission Control>Good, we're ready for launch 
Eg 
We are <c.launch>go</c>! 

4 

00:00:16.000 --> 00:00:20.000 

<v James Mission Control>Good. we’re ready for launch 
i 
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帮 
00:00:20.000 -> 00:00:30.000 
<v Gordo><b>Anrghhhhhhhhhhh</b> 


最 后 , 对 于 WebVTT, 通过 在 时 间 戳 的 后 面 添 加 一 些 线索 设置 ， 我 们 可 以 指定 字幕 显示 的 位 置 。 
表 5-3 列 出 了 一 些 可 用 的 设置 。 


表 5-2 WebVTT 线索 的 设置 


含 义 格式 值 效果 
文本 方向 D: 值 vertical 垂直 ， 从 右 向 左 
vertical-Ir 垂直 ， 从 左 向 右 
行 位 置 工 值 0~100% 线索 的 百分比 位 置 (相对 于 帆 ) 
number 要 显示 的 行 号 
文本 对 齐 A: 什 start 文本 行 首 对 齐 ( 左 对 齐 ) 
middle 文本 行 中 对 齐 (居中 ) 
end 文本 行 尾 对 齐 ( 右 对 齐 ) 
文本 位 置 工 值 线索 文本 的 百分比 位 置 (相对 于 巾 
文本 大 小 S: 值 0~100% 线索 文本 的 大 小 
下 面 看 一 个 示例 。 
WEBVTT 


1 

00:00:01.000 —> 00:00:05.000 A:start T:0 

<v James Misson Control>Gordo are you ready for takeoff? 
2 


00:00:05.000 —> 00:00:08.000 A:end L:10% D:vertical 
<V Gordo><i>Laughs uncontrollably</i> 


此 例 的 第 一 个 线索 将 文本 放 在 帧 的 左 侧 ， 左 对 齐 。 第 二 个 线索 上 空 10%， 垂 直 显 示 ， 右 对 齐 。 
通过 图 5-7 可 以 看 得 更 直观 。 


A:startT0 A:end L:10 D:vertical 


[uames] Gordo are you ready fortakeoff? 


图 5-7 使 用 WebVTT 线索 设置 的 视频 字幕 显示 位 置 示例 


5.2.5 更 多 的 视频 设置 
以 后 需要 对 视频 做 更 多 的 设置 例如， 是否 要 在 视频 上 创建 自 定义 控件 ， 或 是 添加 快 进 和 回放 
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按钮 等 。 这 些 动作 的 一 部 分 可 使 用 HTML5 DOM 的 媒体 元 素 API 来 实现 。 由 于 复杂 的 JavaScript 超 
出 了 本 书 的 讨论 范围 ， 下 面 简要 介绍 一 些 可 以 使 用 的 方法 和 特性 。 
首先 从 为 视频 添加 播放 和 和 暂停 按钮 开始 。 在 下 面 的 例子 中 ， 已 经 删除 了 视频 元 素 的 controls 特 
性 ， 但 在 产品 环境 中 应 该 通过 脚本 来 删除 这 些 控件 ， 以 保证 用 户 未 使 用 JavaScript 的 情况 下 仍 能 
看 到 原生 的 控件 。 以 下 是 简化 的 视频 代码 : 
<video src="gordoinspace webmr> 
Download <a hreE-"gordoinspace webm>Gordo in Space</a> the morvie 
</video> 
接着 ， 为 视频 赋予 变量 。 
<video src="gordoinspace.webm"> 
Download <a href="gordoinspace.webm>Gordo in Space</a> the movie. 
</video> 
<scrip> 
Var gordovid = document.getElementsByTagName('video)[0]; 
</script> 
最 后 ， 为 视频 添加 播放 和 和 暂停 两 个 按钮 。 
<video src="gordoinspace.webm"> 
Download <a href="gordoinspace.webm>Gordo in Space</a> the movie. 
</video> 
<scrip> 
Var gordovid = document.getElementsByTagName('video)[0]; 
</script> 
<input type="button" value="Play" onclick="gordovid .playO"> 
<input type="button" value="Pause" onclick="gordovid.pauseO"> 
这 些 控件 可 以 用 CSS 设置 样式 ， 并 在 视频 上 定位 。 如 果 需 要 ， 也 可 以 将 它们 的 样式 设置 为 在 悬 
停 、 获 得 焦点 或 其 他 希望 的 情况 下 才 显 示 出 来 。 更 深入 一 步 ， 还 可 以 使 用 下 列 DOM 事件 来 创建 完 
全 定制 的 控件 。 
evolume( 音 量 ): 用 来 改变 音频 的 音量 ， 范 围 是 0.0~1.0。 
。 mnted( 静 音 ): 不 管 音量 高 低 ， 直 接 使 视频 静音 。 
ecurrentTime( 当 前 时 间 ): 返回 以 秒表 示 的 当前 播放 位 置 。 
将 前 面 这 些 事件 与 loadeddata、play、pause、timeupdate 和 ended 等 事件 侦 听 器 相 结合 ， 用 户 便 
有 了 创建 控件 集 所 需要 的 一 切 。 
既然 video 是 DOM 中 的 块 级 元 素 ， 那 就 可 以 使 用 CSS 来 设置 它 的 样式 ， 也 可 以 添加 悬 停 或 焦 
点 效果 。 


HTMLS 的 音频 


以 下 是 给 页 面 添加 音频 的 标记 : 


<audio src="gordo _interview.ogg" controls></audio> 
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audio 元 素 的 工作 方式 与 video 元 素 十 分 相似 ， 并 且 共 享 一 些 相同 的 特性 和 API。audio 和 video 
元 素 共用 的 特性 有 : 


ste controls autoplay preload loop muted crossorigin mediagroup 


注意 : 
不 需要 在 HIML 中 指定 音频 的 宽度 和 高 度 。 


像 视频 一 样 ， 控 件 样式 因 浏览 器 而 有 所 不 同 ， 图 5-8 是 在 Opera 中 看 到 的 样式 ， 但 也 可 以 使 用 
JavaScript 创建 自己 的 控件 。audio 元 素 的 媒体 API 与 video 元 素 的 相同 ， 并 且 使 用 相同 的 方法 。 


图 5-8 ”Opera 的 音频 控件 


5.3.1 ”音频 编 解码 器 


与 video 元 素 一 样 有 趣 的 是 ，HTML5 规范 并 未 指定 音频 编 解 码 器 ， 因 为 不 同 的 浏览 器 厂商 支持 
不 同 的 编 解码 器 。 本 质 上 ， 音 频 编 解 码 器 的 作用 是 对 音频 流 进行 解码 以 形成 一 种 能 够 通过 扬声器 进 
行 回放 的 格式 。 目 前 有 很 多 可 用 的 音频 编 解码 器 ， 主 要 有 以 下 五 种 。 

@ ”Vorbis: 这 是 一 种 无 任何 专利 限制 的 开放 编 解码 器 。 它 通常 被 封装 在 Ogg 容器 中 , 但 也 可 以 
封装 在 WebM 或 其 他 容器 中 。 

e MP3: 一 种 在 1991 年 就 已 标准 化 的 受 专利 保护 的 编 解码 器 。 

e@ AAC: Advanced Audio Coding( 高 级 音频 编码 ) 的 缩写 , 用 于 Apple 公司 的 iTunes Store(iTunes 
Store 是 Apple 公司 运营 的 数据 媒体 音乐 商店 )。 它 有 专利 保护 ， 与 MP3 不 同 的 是 可 以 定义 
多 个 配置 文件 。 

e@ WAV: Waveform Audio File Format( 波 形 音频 文件 格式 ) 的 缩写 ， 是 PC 上 存储 音频 的 标准 。 
WAV 文件 一 般 比较 大 ， 因 此 它们 不 适合 作为 流 式 音频 ， 这 里 提 到 是 因为 有 浏览 器 支持 该 
格式 。 

e ”MP4: 主要 用 于 视频 ， 但 也 可 以 用 于 音频 。 


5.3.2 ”浏览 器 支持 情况 


各 浏览 器 对 编 解码 器 的 支持 是 分 散 的 , 但 大 多 数 浏览 器 (IE8 及 更 早 版 本 除外 ) 支 持 的 编 解 码 器 不 
止 一 个 ， 如 表 5-4 所 示 。 


表 5-3_HTML5 音频 格式 兼 的 容 性 


Mozilla WebKit Ope 
ee rrrenepi ot06+ 


g V 
V . 
Ogg Vorbis “ V V 
WAV V V 
MP4 


第 5 章 图 片 与 富 媒体 


与 视频 一 样 ， 没 有 哪个 单一 的 编 解码 器 能 够 在 所 有 浏览 器 上 工作 ， 但 是 可 以 使 用 source 元 素 支 
持 多 种 浏览 器 。 


5.3.3 ”添加 音频 源 


以 video 元 素 所 采用 的 同样 方式 使 用 source 元 素 ， 可 以 指定 多 个 音频 文件 ， 并 让 浏览 器 播放 它 
所 能 理解 的 第 一 个 文件 。 为 了 迎合 不 支持 audio 元 素 的 浏览 器 ， 可 以 添加 用 于 下 载 音频 文件 的 链接 。 
<audio controls> 
<source src="gordo_interview mp3" type="audio/mp3"> 
<source src='gordo interview aac" type="audio/aac"> 
<source src="gordo_interview.oge" type= audio/ogg"> 
Download <a href-="gordo_interview.ogg>Gordo interview</a>. 
<laudio> 
可 以 使 用 本 章 前 面 描述 video 元 素 时 使 用 的 同样 技术 来 提供 跨 浏览 器 兼容 性 的 Flash 备用 文件 。 
如 果 自 己 不 想 做 所 有 的 事情 ， 可 以 使 用 插件 或 库 来 帮助 解决 问题 。 此 外 ， 一 定 要 参考 前 面 介绍 track 
元 素 和 DOM 媒体 元 素 API 时 讨论 的 内 容 ， 它 们 都 可 以 运用 于 audio 和 video 元 素 。 


5.3.4 使 用 jPlayer 


由 Happyworm 开发 的 jPlayer 是 一 个 jQuery 插件 ,如 图 5-9 所 示 。 它 为 兼容 的 浏览 器 提供 HIML5 
音频 和 视频 支持 ， 并 且 为 不 支持 的 浏览 器 提供 备用 的 Flash。jPlayer 可 以 从 wwwjplayer.org 下 载 。 


图 5-9 Happyworm 开发 的 jPlayer 


canvas 


canvas 由 Apple 公司 创建 ， 是 Dashboard 界面 部 件 集 和 Safari 浏览 器 的 组 成 部 分 。 这 项 工作 在 
WebKit 浏览 器 中 得 到 了 延续 , Mozilla 和 Opera 也 紧 随 其 后 。 canvas 后 来 成 为 WHATWG 的 HTML5 
版 本 的 一 部 分 。 微 软 的 Intemet Explorer 直到 IE9 才 支 持 canvas。 通 过 使 用 ExplorerCanvas 库 ， 可 以 
让 canvas 在 正 7 及 以 上 版 本 中 运行 。 但 canvas 到 底 是 做 什么 用 的 呢 ? 


5.4.1 ”基于 像素 的 自由 


简单 说 ，canvas( 画 布 ) 及 其 相关 API 能 够 通过 编写 脚本 来 创建 动态 图 像 和 实时 交互 。 与 SVG 不 
同 ，canvas 是 基于 像素 (光栅 ) 的 ， 因 此 可 以 快速 演 染 ， 但 难以 缩放 。 这 也 意味 着 如 果 想 要 修改 ， 就 
需要 重 绘 整个 画布 。canvas 可 以 用 来 创建 游戏 、 图 表 、 图 形 和 交互 图 形 等 ， 而 且 在 某 些 情况 下 可 以 
创建 整个 应 用 程序 。 甚 至 可 以 与 video 和 audio 元 素 相 结合 以 创建 一 些 真正 有 趣 的 实例 。 
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canvas 包含 用 于 绘制 和 操纵 动态 图 像 的 2D 和 3D 上 下 文 (环境 )。 以 下 将 专注 于 2D 上 下 文 ， 这 
由 于 浏览 器 实现 而 造成 的 限制 。 然 而 ，Firefox 和 Opera 的 实验 版 已 包含 对 3D 上 下 文 的 支持 。 

尽管 canvas 仍 保留 在 HIMLS 规范 中 ， 但 其 上 下 文 API( 使 用 canvas 的 方法 ) 已 经 被 分 离 出 来 ， 
有 自 成 一 体 的 独立 规范 。 


法 


5.4.2 ”添加 /实现 canvas 


为 了 在 文档 中 实现 canvas 并 开始 绘画 ， 需 要 做 两 件 基本 的 事情 。 
(D 在 文档 中 添加 canvas 元 素 。 
(2) 使 用 JavaScript 获得 上 下 文 。 
在 文档 中 添加 canvas 元 素 与 添加 其 他 任何 元 素 一 样 。 
<!DOCTYPE HIML> 
<html lang="en UK"> 
<head> 
<meta charset="UTF-8"> 
<title>Canvas</title> 
</head> 
<body> 
<canvas width="640" height="480" id="outerspace"></canvas> 
body> 
</html> 
为 了 定义 绘画 区 域 ， 在 HTML 中 需要 明确 设置 canvas 的 宽度 与 高 度 。 如 果 不 设置 这 些 尺寸， 
则 canvas 默认 为 300 像素 X150 像素 。 为 其 提供 id 让 我 们 能 够 在 脚本 中 对 canvas 元 素 进行 定位 。 
canvas 元 素 的 工作 方式 与 video 和 audio 元 素 完全 相同 , 而 且 允 许 在 该 元 素 中 为 不 支持 的 浏览 器 
设置 备用 内 容 。IE9 在 已 经 支持 canvas 的 情况 下 ， 还 添加 了 将 备用 内 容 暴 露 给 辅助 技术 的 支持 。 以 
下 是 一 个 带 有 备用 内 容 的 canvas 示例 : 
<canvas width="640" height="480" id="outerspace"> 
Sorry, your browser doesn't support canvas. 
</canvas> 


添加 canvas 标记 就 这 么 简单 。 如 果 在 浏览 器 中 查看 该 例 ， 什 么 也 看 不 到 ,原因 是 canvas 默认 情 
况 下 是 透明 的 。 需 要 使 用 JavaScript， 才 能 真正 炫 炮 绘画 技能 。 


1.2D 上 下 文 


在 进行 绘画 之 前 ， 还 需要 能 够 在 上 面 进行 绘画 的 上 下 文 (环境 )。 可 以 将 它 看 成 画板 ， 或 者 更 确 
切 地 说 是 画板 形式 的 页 面 。 可 以 如 下 这 样 得 到 这 一 上 下 文 : 

<script> 

Var canvas = document getElementById(outerspace): 

Var ctx = canvas.getContext(2d"):; 

</script> 

首先 为 canvas 声明 一 个 变量 ， 并 使 用 getElementById 方法 选择 canvas。 注 意 : outerspace 是 上 
例 中 canvas 的 id。 然 后 声明 第 二 个 变量 (ctx)， 并 用 getContext 方法 选择 上 下 文 ， 本 例 为 2d。 
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为 了 得 到 更 好 的 可 访问 性 ， 可 以 使 用 渐进 式 JavaScript， 以 防止 不 支持 的 浏览 器 出 现 错误 。 只 需 
要 添加 一 条 简单 的 站 语句 ， 便 可 以 取得 这 一 效果 。 
<script> 
var canvas = document. getElementById('outerspace); 
证 (canvas.getContexb{ 
var ctx = canvas.getContext(2d'); 
jelse{ 
// canvas not supported do something 
} 
</script> 
现在 ， 开 始 绘画 。 首 先 从 一 个 简单 的 矩形 开始 。 为 此 ， 使 用 flIRect( 填 充 和 矩形 ) 方 法 ， 并 声明 一 
些 特性 作为 x 轴 的 起 始 位 置 、y 轴 的 起 始 位 置 、 宽 度 和 高 度 。 声 明 坐标 时 ， 用 于 canvas 的 网 格 (或 坐 
标 ) 空 间 的 起 始点 是 左上 角 ， 正 方向 为 x 轴 向 右 、y 轴 向 下 。 
<scrip> 
Var canvas = document.getElementById('outerspace’): 
if (canvas.getContext){ 
var ctx = canvas.getContext(2d); 
/lset the size and shape (x, y, width, height) 
ctxfillRect(180, 180, 240, 120): 
} 
/script> 
最 后 ， 添 加 一 个 onload 函数 ， 并 在 文档 中 添加 脚本 。 效 果 如 图 5-10 所 示 。 


<!DOCTYPE HIML> 

<html lang="en_UK"> 

<head> 

<meta charset="UTF-8"> 

<title>Canvas</title> 

<scrip> 

‘window.onload = function| { 

Var canvas = document.getElementById("outerspace”). 

ctx = canvas.getContext("2d"); 

//x=10, y=20, width = 200,height= 100 

ctx.fillRect(180, 180, 240, 120); 

3 

/script> 

</head> 

<body> 

<canvas width="640" height="480" id="outerspace"> 
Sorry, your browser doesn't support canvas. 

</canvas> 

</body> 

</html> 
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Camves x 入 下 i 


© @@ fileyW/GJHTML5+CSs3hschosrin- 有 女 @ 8 


图 5-10 使 用 canvas 绘制 的 简单 矩形 


通过 运用 finStyle( 填 充 样 式 ) 方 法 ， 可 以 改变 矩形 的 颜色 。 注 意 ， 要 把 它 放 在 fillRect 之 前 。 正 
如 Remy Sharp 指出 的 : “如 果 打算 绘画 ， 首 先 要 把 画笔 浸入 颜料 桶 里 ”。 为 fllStyle 提供 的 值 可 以 
是 关键 字 (如 blue)、 十 六 进 制 代码 (#002654) 或 rgba， 如 下 所 示 : 
<scrip> 
window.onload = function| { 
Var canvas = document.getElementById('‘outerspace’); 
if(canvas.getContext){ 
Var ctx = canvas.getContext(2d"); 
ctx.fillStyle="rgba(0,149.,197,0.8)"; 
ctx.fillRect(180, 180, 240, 120); 
于 
script> 
如 果 喜 欢 让 矩形 有 外 框 而 不 填充 ， 可 以 使 用 strokeRect( 画 笔算 形 ) 方 法 ， 代 码 如 下 所 示 ， 效 果 如 
图 5-11 所 示 。 还 可 以 使 用 clearRect( 清 除 和 矩形 ) 方 法 使 区 域 透明 。 
<scrip> 
window.onload = fonction0 { 
Var canvas = document.getElementById('outerspace’); 
if (canvas.getContext){ 
Var ctx = canvas.getContext(2d"); 
ctx.fillStyle="rgba(0.149.197.0.8)"; 
ctx.strokeRect(180, 180, 240, 120); 
3 
</script> 


图 5-11 使 用 canvas 绘制 的 画笔 矩形 
使 用 canvas 可 以 绘制 的 不 限于 矩形 ， 也 可 以 绘制 线条 、 路 径 (复杂 曲线 )、 渐 变 线 和 文字 等 。 同 
时 也 可 以 使 用 图 像 、 透 明和 变换 等 。 
例 5-1: 使 用 canvas 绘制 带 有 渐变 和 阴影 的 圆 。 
首先 使 用 canvas 绘制 一 个 简单 的 圆 ， 如 图 5-12 所 示 。 
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> CO Mey/FJHTMLS+CSSMS/m0S/5-Lhm 


EE]| 


图 5-12 使 用 canvas 绘制 的 圆 


注意 : 


在 Canvas API 中 ， 角 度 的 单位 是 弧度 而 不 是 度 。 使 用 下 面 的 JavaScript 表达 式 可 以 将 度 转换 为 


弧度 : 
var radians = (Math PL/180)*degrees; 
为 了 创建 这 个 圆 ， 要 遵循 以 下 步 又 : 
(1) 选择 开始 路 径 (beginPath)。 
(2) 绘制 一 条 弧 (ctx.arc)， 圆 心 为 (320，240)， 
G) 将 它 从 0 旋转 到 2* PI 弧度 (360”)。 


E 径 为 200。 


(4) 用 closePath 方法 关闭 路 径 ， 并 运用 预定 义 
以 下 代码 演示 了 上 述 步骤 : 


ctxbeginPathO: 
/begin the path( 开 始 路 径 ) 
ctxarc(320.240.200.0.Math PI*2.tmue); 


的 填充 。 


/draw an arc( 绘 制 弧 ) - (x, y, radius, startAngle, endAngle, anticlockwise) 


ctx.closePathO: 
/1 close path( 关 闭路 径 ) 
ctxfill0; 

D; 

/scrip> 


接 下 来 ， 在 圆 上 添加 渐变 效果 。 为 此 ， 首 先 定 义 用 于 渐变 的 变量 (mygrad)， 然 后 运用 


createLinearGradient( 创 建 线性 渐变 ) 方 法 ， 并 指定 渐 


Var mygrad = ctx.createLinearGradient(300.100.640.480): 
W varmygrad = ctx.createLinearGradient(x1.71X2.72): 


变 的 起 点 (x1，y]) 和 终点 (x2，y2)， 如 下 所 示 : 
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现在 , 有 了 一 个 其 中 存储 了 渐变 效果 的 对 象 , 下 面 用 addColorStop( 添 加 颜色 终止) 方法 为 其 设置 
颜色 。 该 方法 有 两 个 参数 : position( 位 置 ) 和 color( 颜 色 )。position 是 一 个 0 到 1 之 间 的 值 ， 它 定义 了 
相对 于 形状 大 小 的 颜色 终止 位 置 。 例 如 ， 将 position 设置 为 0.25， 便 是 将 颜色 放置 在 沿 渐变 的 1/4 
区 间 内 。color 参数 是 一 个 基于 CSS 的 字符 串 ， 可 以 使 用 关键 字 、 十 六 进 制 代码 或 rgba。 


mygrad.addColorStop(0, #6c88ba); 
// mygrad.addColorStop(position, colon); 
为 了 确保 渐变 平滑 ， 并 且 不 填充 整个 圆 ， 在 这 个 线性 渐变 例子 中 添加 3 种 颜色 ， 终 止 位 置 分 别 
为 0、0.9 和 1， 效果 如 图 5-13 所 示 。 
<scrip> 
window.onload = fnnction0 { 
Var canvas = document.getElementById(‘outerspace’); 
if(canvas.getContexD){ 

Var ctx = canvas.getContext(2d"); 
// Define the gradient( 定 义 渐变 ) 
Var mygrad = ctx.createLinearGradient(300,100,640,480); 
mygrad.addColorStop(0, #6c88ba); 
mygrad.addColorStop(0.9, rgba(0.0.0,0.5)); 
mygrad.addColorStop(1, rgba(0,0,0.1)); 
/Draw the circle( 绘 制 圆 ) 
ctxfillstyle = mygrad; 
ctx.beginpath(); 
ctxarc(320.240.200.0.Math PI*2,true); 
Ctx.closePath(); 
ctx fill0; 


»; 

/scrip> 

请 注意 ， 未 使 用 径 向 渐变 实现 这 一 效果 。 使 用 径 向 渐变 要 稍微 复杂 一 些 。 

首先 调用 createRadialGradient( 创 建 径 向 渐变 ) 方 法 ， 其 工作 方式 与 createLinearGradient 相同 , 但 
多 了 两 个 半径 相关 的 参数 。 


var radgrad = ctx.createRadialGradient(305.215.150.320.240.200): 
// var radgrad = ctx.createRadialGradient(x0, y0, radius1, x1, y1, radius2) 
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然后 使 用 与 线性 渐变 示例 相同 的 方式 定义 颜色 终止 位 ， 这 次 使 用 了 4 个 颜色 终止 位 。 


Tadgrad addColorStop(0. #6c88ba); 
Tadgrad addColorStop(0.8. rgba(61.71.89.0.7): 
Tadgrad addColorStop(0.9. rgba(61.71.89.0.8)); 
Tadgrad.addColorStop(1, rgba(255.255.255.1)): 


最 后 ， 绘 制 一 个 矩形 来 存储 此 径 向 渐变 。 


ctxfilstyle 一 radgrad: 
StxfiIRect(0.0.640.480); 
/hrectangle that fills the whole canvas( 用 于 填充 整个 canvas 的 矩形 ) 


将 前 面 的 代码 片段 结合 到 一 起 ， 实 现 一 个 完整 的 示例 。 


// Create gradient and color sops( 和 对 渐变 生 终止 们 

var radgrad = ctx.createRadialGradient(305.215.150.320.240.200): 
radgrad.addColorStop(0, #6c88ba’): 

radgrad.addColorStop(0.8, rgba(61,71,89.0.7)); 
radgrad.addColorStop(0.9, rgba(61.71,89.0.8)); 
Tadgrad.addColorStop(1, rgba(255,255,255,1)); 

/1 draw shapes( 绘 制图 形 ) 

ctx-fillStyle = radgrad:; 

ctx-fillRect(0,0,640.480): }}; 

/script> 


你 应 该 能 看 出 图 5-13 和 图 5-14 所 示 两 个 例子 间 的 差别 。 
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回 到 线性 渐变 示例 ， 可 以 使 用 以 下 4 个 特性 给 圆 添加 阴影 ， 将 它们 插入 到 渐变 定义 代码 之 后 ， 
但 放 在 绘制 圆 的 代码 之 前 。 
/Create a drop shadow( 创 建 下 坠 阴影 ) 
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ctx.shadowOffsetX = 5; 

ctx.shadowOffsefY = 10; 

ctx.shadowBlur = 20; 

ctx.shadowColor = rgba(0,0.0.0.9): 

注意 ， 这 些 偏 移 量 可 以 设置 为 负数 ， 意 即 阴影 并 不 总 是 出 现在 所 绘制 形状 的 右 下 方 。 将 它 与 前 
面 的 线性 渐变 结合 起 来 ， 最 终 形成 以 下 脚本 : 


<scrip> 
window.onload = function| { 
Var canvas = document.getElementById(‘outerspace); 
if(canvas.getContexD){ 
Var ctx = canvas.getContext(2d); 
/1 Define the gradient( 定 义 渐变 ) 
Var mygrad = ctx.createLinearGradient(300,100,640,480); 
Inygrad.addColorStop(0. #6c88ba’): 
mygrad.addColorStop(0.9, rgba(0.0.0,0.5)); 
mygrad.addColorStop(1, rgba(0.0.0.D7; 
VCreate a drop shadow( 创 建 下 坠 阴影 ) 
ctx.shadowOffsetX = 5; 
ctx.shadowOffsetY = 10; 
ctx.shadowBlur = 20; 
ctx.shadowColor = "black"; 
// Draw the circle( 绘 制 圆 ) 
ctx.fillStyle = mygrad; 
ctx.beginPath(); 
ctx.are(320,240,200,0.Math. PI*2,true); 
ctx.closePath(); 
3; 
</script> 
如 果 将 上 述 带 有 canvas 元 素 的 脚本 添加 到 完整 的 HTML 文档 中 ， 并 在 支持 canvas 的 浏览 器 中 
打开 ， 最 终 效果 应 该 类 似 于 图 5-15。 


© eIHTMLS +CSS3/NS/ehOS/5-1-4 htm [EE 


图 5-15 使 用 canvas 绘制 的 带 有 渐变 和 阴影 的 圆 
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了 解 了 canvas 的 基本 绘图 方法 后 ， 还 可 以 通过 其 API 获得 更 多 功能 。 例 如 ， 用 createPattem( 创 
建 模式 ) 合 并 图 像 以 及 绘制 线条 、 贝 塞 尔 曲线 和 文本 等 ， 可 以 使 用 变换 、 平 移 和 动画 ， 还 可 以 通过 调 
用 toDataURL 方法 将 画布 保存 为 图 像 。 

2. canvas 在 IE 中 的 支持 情况 


用 canvas 可 以 创建 的 一 些 令 人 惊奇 的 示例 ， 可 以 通过 使 用 一 个 名 为 ExplorerCanvas(excanvasjs) 
的 JavaScript 库 来 实现 正 支持 。 工 作 方 式 是 将 脚本 转换 成 微软 的 VML 专利 技术 。 这 个 库 的 使 用 如 
同 下 载 文件 一 样 简 单 ， 只 需要 在 页 面 的 head 中 添加 一 个 对 该 库 的 链接 即 可 ， 如 下 所 示 : 


<!DOCTYPE html> 


<canvas id="outerspace" width="640" height="480"></canvas> 


</body> 
</html> 


使 用 excanvasjs 可 能 会 降低 执行 和 演 染 的 速度 。IE9 已 经 能 够 支持 canvas， 可 以 不 再 使 用 
excanvas.js。 


5.4.3 ”canvas 的 威力 与 潜力 

关于 canvas 的 潜力 ， 现 在 简要 地 介绍 几 个 使 用 canvas 及 其 API 的 示例 。 

1. 游戏 

(1) Cut the Rope 

Cut the Rope( 剪 绳子 ) 是 iPhone 上 一 款 受 人 喜爱 的 游戏 ， 如 图 5-16 所 示 ， 而 且 现 在 已 经 被 
Microsoff、ZeptoLab 和 Pixel Lab 转换 成 了 HTML5 版 本 。 他 们 将 该 游戏 的 代码 从 Objective-C 转换 
成 JavaScript, 特别 是 对 图 形 利 用 了 canvas。 他 们 甚至 发 现 ,在 某 些 领域 canvas 能 提供 相 比 用 于 iPhone 
版 的 OpenGL 更 多 的 功能 。 在 www.cuttherope.ie 上 可 以 找到 这 款 游戏 。 


(2) Canvas Rider 
Canvas Rider( 画 布 骑手 ) 让 用 户 能 够 控制 骑手 沿 车 道 骑 行 而 不 跌倒 ， 如 图 5-17 所 示 。 该 游戏 是 用 


canvas 创建 的 ， 并 允许 用 户 提交 自己 的 游戏 等 级 。 访 问 http://canvasrider.com 可 玩 此 游戏 。 
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图 5-16 用 canvas 创建 的 Cut the Rope 游戏 图 5-17 用 canvas 创建 的 Canvas Rider 游戏 


2. 应 用 程序 


(1) Darkroom 
Darkroom(http://mugtug.com/darkroom) 由 MugTug 创建 ， 是 用 canvas 创建 的 一 个 集 所 有 功能 于 
- 体 的 图 像 处 理 包 ， 如 图 5-18 所 示 。Darkroom 有 广泛 的 特性 集 ， 能 够 让 设计 人 员 随心 所 欲 地 剪 切 、 

镜像 和 旋转 图 像 。 同 Photoshop 一 样 ， 用 户 可 以 修改 图 像 的 层级 、 增 加 亮度 或 对 比 度 ， 以 及 运用 默 
认 的 滤 镜 ， 如 “黑白 ” 滤 镜 等 。 一 旦 编辑 好 图 像 ， 就 可 以 将 其 保存 到 桌面 。 

(2) Sketchpad 

MugTug 还 发 布 了 另 一 款 在 线 工 具 Sketchpad(http://mugtug.com/sketchpad)。 这 是 在 浏览 器 中 运 
行 ， 并 用 canvas 建立 起 来 的 一 个 功能 齐全 的 绘图 包 ， 如 图 5-19 所 示 。 


图 5-18 出 自 MugTug 的 Darkroom 图 5-19 出 自 MugTug 的 Sketchpad 


3. 结合 使 用 video、audio 与 canvas 


新 的 原生 媒体 元 素 (audio 和 video) 的 设计 目的 是 与 canvas 协同 工作 ， 从 而 创建 丰富 的 、 引 人 入 
胜 的 在 线 体验 。 以 下 是 一 些 实际 运用 示例 。 

(1) 9elements 的 HTML canvas 实验 

9elements 用 新 的 HIMLS 特性 进行 试验 , 特别 是 audio 和 canvas。 他们 将 这 些 元 素 与 Twitter API 
和 Processing.js(http://processingjs.org) 结 合 在 一 起 ， 用 于 粒子 泻 染 ， 并 通过 音频 轨道 进行 同步 ， 创 建 
出 非常 漂亮 的 小 鸟 鸣叫 和 粒子 动画 的 可 视 化 界面 ， 如 图 5-20 所 示 。 在 9elements 的 博客 
(http:/j.mp/9elementsblog) 上 可 以 看 到 该 实验 。 

(2) 视频 挫 毁 
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Crafty Mind 的 Sean Christmann 创建 了 一 个 demo， 它 结合 使 用 了 video 和 canvas 元 素 。 该 演示 


的 基本 前 提 是 展示 如 何 将 canvas 与 其 他 元 素 (video) 协 同 工 作 以 创建 令 人 震惊 的 效果 。 如 图 5-21 所 示 ， 
单 击 视频 会 引起 “爆炸 ”。 它 还 给 出 了 一 些 变换 和 转换 的 预览 效果 ， 这 些 变换 和 转换 能 够 用 CSS 在 
这 些 元 素 上 实现 。 
4 Te * A He | 
» 
和 
党 me 人 
2 Nm 全 
5-20 9elements 的 canvas 实验 5-21 ”视频 摧毁 效果 


SR SVG 


Scalable Vector Graphics(SVG， 可 缩放 向 量 图 ) 是 一 项 在 浏览 器 中 创建 向 量 图 形 的 技术 ， 这 种 向 
量 图 基于 XML 文件 格式 ， 是 W3C 从 1999 年 起 便 积极 开发 的 一 个 开放 标准 (www.w3.org/TR/SVG)。 
请 注意 ，SVG 不 是 HTML5 的 一 部 分 ， 但 HTML5 可 以 嵌入 内 联 SVG。 


5.5.1 SVG 与 canvas 的 选择 


SVG 文件 是 基于 向 量 的 , 意 即 它们 能 够 被 缩放 ,而 不 会 损失 图 像 质量 。 这 与 canvas 形成 了 鲜明 
对 比 ， 它 们 基于 像素 (光栅 )， 且 不 能 优雅 地 进行 缩放 。 所 有 主流 浏览 器 (IE8 及 其 早期 版 本 除外 ) 都 支 
持 基本 的 SVG。Chrome 7+、Intemet Explorer 9、Firefox 4+、Operal1.5+ 和 Safari5.1+ 等 均 支持 嵌入 
到 HIML5 中 的 SVG， 这 种 SVG 也 称 为 “内 联 SVG”。 它 可 以 实现 canvas 的 许多 效果 。 一 个 主要 
的 区 别 是 , 每 个 SVG 元 素 都 会 成 为 DOM 的 一 部 分 (canvas 总 是 空 的 ), 这 让 每 个 对 象 都 能 够 被 索引 ， 
并 提供 了 一 个 可 访问 性 更 好 的 解决 方案 。 现 在 面临 两 难 的 选择 ，canvas 还 是 SVG? 

canvas 和 SVG 都 是 可 编 脚 本 的 图 像 ， 都 可 以 创建 形状 、 线 条 、 圆 弧 、 曲 线 、 渐 变 和 很 多 其 他 内 
容 ， 但 两 者 之 间 如 何 取舍 呢 ? 

SVG 内 容 可 以 是 静态 的 、 活 动 的 或 交互 的 。 可 以 用 CSS 设置 它 的 样式 ， 或 用 SVG DOM 为 其 
添加 行为 。 因 为 每 个 元 素 都 是 DOM 的 一 部 分 ， 这 意味 着 SVG 是 相对 可 访问 的 。SVG 也 是 分 辨 率 
无 关 的 ， 并 能 够 缩放 到 任意 屏幕 大 小 。 但 对 于 较为 复杂 的 形状 ， 可 能 会 降低 泻 染 速度 。 

相 比 之 下 ，canvas 使 用 JavaScript API， 能 够 进行 程序 绘图 。 它 具有 两 个 上 下 文 对 象 : 2D 或 3D 
上 下 文 。 它 没有 具体 的 文件 格式 ， 只 能 使 用 脚本 进行 绘制 。 因 为 没有 相应 的 DOM 节点 ， 只 能 专注 
于 绘制 (编写 脚本 )， 而 不 能 随 着 图 像 复杂 度 的 增加 而 取得 同样 的 性 能 。 也 可 以 将 结果 保存 为 PNG 或 
JPG 图 像 。 

决定 哪 种 技术 最 适合 可 以 从 以 下 方面 考虑 : SVG 比较 适用 于 数据 图 表 和 分 辩 率 独立 的 图 形 、 动 
画 交 互 的 用 户 界 面 或 矢量 图 像 编辑 。canvas 适合 于 游戏 、 位 图 图 像 处 理 (如 前 面 看 到 的 Darkroom 示 
例 )、 光 栅 图 形 (数据 可 视 化 、 分 形 等 ) 以 及 图 像 分 析 ( 直 方 图 等 )。 
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5.5.2 用 SVG 发 布 向 量 


为 了 产生 SVG 图 形 , 可 以 用 两 种 方式 : 使 用 Adobe Tllustrator 或 nkscape( 一 个 开源 的 SVG 图 形 
编辑 器 ) 之 类 的 图 形 包 或 者 自己 编写 。 


1. 实现 基本 的 SVG 


编写 内 联 SVG 的 语法 相对 简单 。 首 先 在 HIML 的 body 中 添加 一 个 svg 元 素 。 然 后 为 该 元 素 添 
加 SVG XML 命名 空间 并 指定 其 尺寸 。 但 要 记 住 ， 由 于 它 是 XML， 必须 确保 总 是 对 特性 使 用 引号 ， 
并 包含 反 斜 线 。 首 先 ， 在 页 面 中 创建 svg 元 素 。 


<!doctype html> 

<html lang="en_ UK"> 

<head> 
<meta charset="UTF-8"> 
<title>SVG</title> 

</head> 

<body> 

<svg xmins="http:/Wwww.w3.org/2000/svg" width="400px" height="400px"> 
<! 一 SVG content will go here --> 

</sve> 

<body> 

</html> 


接着 , 在 SVG 父 元 素 ( 即 svg 元 素 ) 中 添加 基本 的 SVG 形状 元 素 。 可 供 使 用 的 基本 形状 有 :rect( 矩 
形 )、circle( 圆 )、ellipse( 李 圆 )、line( 直 线 )、polyline( 折 线 ) 以 及 polygon( 多 边 形 ) 等 。 首 先 从 创建 一 个 
简单 的 画笔 矩形 开始 。 这 些 例 子 在 前 面 提 到 的 浏览 器 中 都 能 正常 工作 。 


<!doctype html> 
<html lang="en_ UK"> 
<head> 
<meta charset="UTF-8"> 
<title>SVG</title> 
</head> 
<body> 
<svg xmins="http://Wwww.w3.org/2000/sveg" width="400px" height="400px"> 
<rect fill="black" stroke="red" x="150" y="150" width="100" height="50"/> 
<svg> 
</body> 
</html> 


在 图 5-22 中 可 以 看 到 用 SVG 创建 的 矩形 的 显示 结果 。 这 些 特性 都 是 不 言 自明 的 。x 和 y 的 值 
表示 进行 绘制 的 起 点 坐标 ， 从 SVG 元 素 左上 角 开 始 。 这 意味 着 该 定形 将 从 SVG 元 素 的 左 侧 150 像 
素 和 顶端 150 像素 的 位 置 开 始 绘制 。stroke( 画 笔 ) 和 fl( 填 充 ) 的 值 可 以 用 十 六 进 制 代码 、 关 键 字 、 rgba 
或 rgba 值 来 指定 。 
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图 5-22 用 SVG 创建 的 矩形 


2. 创建 一 个 与 canvas 中 同样 的 例子 


例 5-2: 用 SVG 创建 一 个 与 canvas 中 同样 的 例子 ， 以 便 对 两 者 进行 比较 。 首先, 用 基本 的 circle 
形状 元 素 建立 一 个 圆 。 

<circle fili="#6c88ba" stroke="red" cx="150" cy="150" r="150"/> 

cx 和 cy 的 值 表 示 圆 的 圆心 ,r 表示 半径 。 用 这 个 形状 元 素 蔡 换 前 面 例子 中 的 矩形 , 效果 如 图 5-23 
所 示 。 

现在 继续 添加 渐变 。 可 以 通过 建立 一 组 定义 (defs) 并 指定 一 系列 参数 来 实现 ， 例 如 渐变 类 型 
(linearGradient)、id(id="MyGradient")、 角 度 (gradientTransform="rotate(45)") 以 及 一 系列 颜色 终止 位 置 
(<stop ... />)。 


<defs> 
<linearGradient id="MyGradient" gradientTransform="rotate(45)"> 
<stop offset="09%6" stop-color="#6c88ba" /> 
<stop offset="90%" stop-color="#677794" /> 
<stop offset="1009%%" stop-color="#6e747f" /> 
</linearGradient> 
</defs> 


在 定义 渐变 后 ,现在 需要 将 它 运用 于 圆 。 实 现 办 法 是 ， 在 圆 的 组 特性 上 用 url 定 界 符 引用 渐变 
的 id 值 (MyGradient)。 这 便 创建 了 前 面 用 canvas 实现 的 同样 效果 ， 如 图 5-24 所 示 。 


<!DOCTYPE HIML> 
<html lang="en UK"> 
<head> 
<meta charset="UTF-8"> 
<title>SVG</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" width="400px" height="400px"> 
<defs> 
<linearGradient id="MyGradient" gradientTransform="rotate(45)"> 
<stop offset="0%" stop-color="#6c88ba" /> 
<stop offset="90%" stop-color="#677794" /> 
<stop offset="100%" stop-color="#6e747f" /> 
</linearGradient> 
</defs> 
<circle fili="ur(#MyGradient)" cx="150" cy="150" r="150"/> 
<svg> 
</body> 
<html> 
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5-23 用 SVG 创建 的 贺 图 5-24 用 SVG 创建 的 带 有 渐变 的 圆 
也 可 以 用 SVG 创建 径 向 渐变 以 及 其 他 更 多 的 图 形 。 


富 媒体 页 面 的 设计 实例 


一 幅 生动 形象 的 图 像 所 包含 的 信息 量 可 能 远 远 超过 许多 文字 描述 ， 给 人 的 视觉 印象 会 比 文字 强 
烈 很 多 。 动 画 、 视 频 是 网 页 设计 元 素 中 最 生动 、 活 跃 的 因素 ， 能 促进 人 与 人 之 间 的 沟通 与 互动 ， 使 
信息 内 容 得 到 极 大 丰富 ， 带 给 受众 视听 享受 。 

例 5-3: 使 用 富 媒体 页 面 设计 ， 效 果 如 图 5-25 所 示 。 


人 
队 作战 外 ，《 划 的 磋 时 》 据 有 特色 的 葛 推 ， 瑟 动 CE 本 99 战 网 
树 、 至 唤 果 系统 、 符 文 等 元 这 ， 让 玩家 大 笃 全 和 的 英 克 对战， 


2 玫 各 加 片 


+ 国生 33 


【精彩 片段 】 


【精彩 声音 片段 ] 


bp 000/110 9 一 一 只 


图 5-25 富 媒 体 页 面 浏览 效果 
1. 实例 分 析 


实例 主要 内 容 包含 : 在 页 面 中 加 入 图 像 ， 定 义 媒介 分 组 和 标题 ， 加 入 视频 播放 器 ， 加 入 音乐 播 
放 器 等 。 具 体 步 又 如 下 : 

(D 加 入 一 组 图 片 ， 使 用 <img> 元 素 ， 并 用 <figure> 和 <figcaption> 元 素 分 组 和 添加 标题 。 

(2) 加 入 视频 播放 器 ， 使 用 <video> 元 素 。 

(3) 加 入 音乐 播放 器 ， 使 用 <audio> 元 素 。 
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2. HTML 代码 实现 


本 例 中 使 用 了 富 媒体 常用 的 标记 ， 页 面 中 呈现 了 图 片 、 声 音 、 视 频 ， 页 面 简单 ， 没 有 布局 。 代 
码 如 下 : 


<title> 英 雄 联盟 </title> 
</head> 
<body> 
<h3> 英 雄 联盟 </h3> 
8 
<b> 英 雄 联盟 </b> 是 由 腾讯 全 资 子 公司 Riot Games 公司 开发 的 3D 竞技 场 战 网 游戏 ， 其 主创 团队 是 由 实力 强劲 的 魔兽 
争霸 系列 游戏 多 人 即时 对 战 自 定义 地 图 的 开发 团队 ， 以 及 动 视 暴雪 等 著名 游戏 公司 的 美术 、 程 序 、 策 划 人 员 组 成 ， 将 DOTA 
的 玩法 从 对 战 平台 延伸 到 网 络 游戏 世界 。 除 了 DOTA 的 游戏 节奏 、 即 时 战略 、 团 队 作战 外 ，《 英 雄 联盟 》 拥 有 特色 的 英雄 、 
自动 匹配 的 战 网 平台 ， 包 括 天 赋 树 、 召 唤 师 系统 、 符 文 等 元 素 ， 让 玩家 感受 全 新 的 英雄 对 战 。 
> 
<hr> 
<figure> 
<figcaption> 英 雄 联盟 图 片 </figcaption> 
<img src="images/00.jpg" alt=" 英 雄 联盟 专题 " width="100" height="100" /> 
<img src="images/01.jpg" alt=" 英 雄 联盟 专题 " width="100" height="100" /> 
<img src="images/02.jpg" alt=" 英 雄 联 盟 专题 " width="100" height="100" /> 
<img src="images/03.jpg" alt=" 英 雄 联 盟 专题 " width="100" height="100" /> 
</figure> 
<hr 户 
<h3>【 精 彩 片 段 】</h3> 
<video controls width="200"> 
<source src="medias/LOL 英雄 联盟 mp4" type="video/mp4" /> 
</video> 
<hr 户 
<h3>【 精 彩 声音 片段 】</h3> 
<audio controls> 
<source src="medias/ 德 玛 西亚 .mp3" controls="controls" autoplay="audio" width="300" /> 
</audio> 
<body> 
</html> 


3. 代码 分 析 


(1) 在 网 页 中 加 入 剧照 ， 并 为 一 组 图 片 添加 图 片 说 明 ， 使 用 <figure> 和 <figcaption> 来 实现 。 


<figure> 
<figcaption> 英 雄 联盟 图 片 </figcaption> 
<img src="images/00jpg" alt=" 英 雄 联 盟 专题 " width="100" height="100" /> 
(2) 在 页 面 中 加 入 视频 播放 器 ， 以 正常 显示 视频 ， 设 置 打 开 后 不 自动 播放 视频 。 
<video controls width="200"> 
<source src="medias/LOL 英雄 联盟 mp4" type="video/mp4" /> 
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</video> 
(3) 在 页 面 中 加 入 音乐 播放 器 ， 正 常 显 示 音乐 播放 器 的 控制 面板 ， 当 页 面 打 开 后 自动 播放 音乐 。 
<audio controls> 
<source src="medias/ 德 玛 西亚 .mp3" controls="controls" autoplay="audio" width="300" /> 
</audio> 


本 章 小 结 


如 本 章 所 述 ， 在 浏览 器 中 使 用 富 媒体 有 无 尽 的 可 能 性 。 本 章 介绍 的 多 种 技术 可 以 创建 令 人 震惊 
的 效果 ， 完 全 可 以 媲美 Flash 或 其 他 专利 插件 。 浏 览 器 支持 这 种 原生 的 多 媒体 内 容 ， 意 味 着 已 不 再 
需要 插件 。 浏 览 器 提供 了 原生 控件 ， 这 些 控件 内 置 了 键盘 可 访问 性 。 由 于 不 再 需要 插件 ， 网 站 的 性 
能 也 得 以 改善 。 

通过 了 解 如 何在 HTMLS5 文档 中 实现 video、audio、canvas 和 SVG， 用 户 应 开阔 眼界 ， 把 握 使 
用 在 线 富 媒体 的 新 一 波 机 会 ， 创 建 真正 有 吸引 力 、 开 放 且 可 访问 的 交互 式 体验 。 


[EE 思考 和 练习 


1. 网 页 中 常用 的 图 像 格式 有 JPG、GIF、 和 PNG， 它们 之 间 分 别 有 什 么 不 同 ? 

2. 试 述 <source> 元 素 的 作用 。 

3. 在 HIML5 中 ， 在 网 页 中 嵌入 视频 文件 使 用 什么 标记 ? 

4. 将 本 书 配套 网 站 上 提供 的 文件 编码 成 足够 多 的 格式 以 确保 跨 浏览 器 的 兼容 性 ， 然 后 用 video 
和 audio 元 素 把 它们 显示 到 示例 网 站 中 并 创建 自己 的 定制 播放 控件 。 

5. 选择 canvas 或 SVG， 制作 一 幅 简单 的 示意 图 ， 表 示 在 轨道 上 运行 的 地 球 、 月 亮 和 太阳 ， 并 
将 其 添加 到 示例 网 站 中 。 根 据 所 提供 的 一 些 链接 ， 在 进一步 研究 的 基础 上 将 示意 图 改 为 动画 。 

6. 查看 图 5-26 中 的 图 片 ， 判 断 在 将 它们 保存 为 PNG 或 JPEG 格式 时 ， 文 件 的 大 小 及 图 片 质量 


本 


图 5-26 图 片 展示 
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HTML5 表 单 的 应 用 


几乎 每 当 需 要 从 网 站 访问 者 那里 收集 信息 时 ， 都 需要 使 用 “表单 ”。 有 的 表单 非常 复杂 ， 例 如 
用 来 订购 机 票 或 者 在 线 购 买 保险 的 表单 。 还 有 些 表单 则 很 简单 ， 例 如 Google 首页 的 搜索 框 。 

很 多 在 线 表单 具有 与 纸 质 表单 很 强 的 相似 性 。 在 纸 上 ， 表 单 由 文本 书写 区 、 复 选 框 、 可 选项 等 
组 成 。 类 似 地 , 在 网 页 上 可 以 创建 由 “表单 控件 ”组 合 而 成 的 表单 , 包含 “文本 框 ”“ 复 选 框 ”“ 选 
择 框 ”“ 单 选 按钮 ”等 。 本 章 将 介绍 如 何 将 这 些 不 同 种 类 的 控件 组 合 到 表单 中 ， 用 于 收集 来 自 网 站 
访问 者 的 所 有 种 类 的 信息 。 


本 章 的 学 习 目标 : 

e ”如 何 创建 表单 

如 何 使 用 不 同类 型 的 表单 控件 
用 户 输入 数据 的 处 理 

如 何 使 表单 易于 访问 

如 何 组 织 表单 内 容 


[GE 认识 表单 


先 从 两 个 表单 示例 开始 。 图 6-1 展示 的 是 百度 首页 ， 其 中 包含 两 类 表单 控件 。 
e 文本 输入 : 在 其 中 可 以 输入 搜索 词 。 
e 提交 按钮 :向 服务 器 发 送 表单 。 这 个 表单 中 有 一 个 提交 按钮 ， 上 面 写 着 “百度 一 下 ”。 


加 
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现在 再 来 看 一 个 更 复杂 的 例子 。 图 6-2 展示 了 一 张 保险 表单 ， 其 中 所 包含 控件 的 种 类 相 比 上 例 
多 了 很 多 。 

e@ 选择 框 : 有 时 又 称 为 “下 拉 列 表 ”( 参 照 图 6-2 左上 角 )， 用 于 从 提供 的 答案 列表 中 进行 选择 。 

@ 单 选 按钮 :参照 图 6-2 右上 角 ， 带 有 Yes 或 No 选项 的 控件 。 当 具有 一 组 单 选 按钮 时 ， 只 能 
选中 其 中 一 个 作为 答案 。 

e” 复 选 框 : 参照 图 6-2 底部 的 控件 , 它们 用 于 指定 联系 方式 (通过 电子 邮件 、 传 统 邮件 或 电话 )。 
当 具 有 一 组 复 选 框 时 ， 可 以 选中 多 个 答案 。 

e 文本 输入 : 用 于 输入 各 种 信息 ， 在 本 例 中 用 于 填写 汽车 保险 生效 的 起 始 日 期 与 车 牌号 。 


图 6-2 保险 表单 


表单 都 位 于 <form> 元 素 中 , 而 表单 控件 (文本 输入 框 、 下 拉 框 、 复 选 框 提交 按钮 等 ) 则 位 于 <form> 
开始 标签 与 </form> 结 束 标签 之 间 。<form> 元 素 还 能 够 包含 页 面 中 其 他 位 置 的 HTML 标记 。 

用 户 在 表单 中 输入 完 信息 后 ， 通 常 还 必须 单 击 提交 按钮 。 该 操作 表明 用 户 完成 表单 ， 之 后 表单 
数据 通常 会 被 发 送 到 Web 服务 器 。 

在 传统 网 页 中 ， 表 单数 据 抵达 服务 器 之 后 ， 一 段 脚 本 或 其 他 程序 会 处 理 数据 并 返回 一 个 新 的 网 
页 。 返 回 的 网 页 用 于 响应 发 出 的 请 求 ， 或 用 于 确认 执行 的 动作 。 这 种 方式 的 一 个 变种 叫 作 Ajax， 其 
中 所 有 动作 都 在 同一 页 面 中 发 生 。 
例如 ， 将 图 6-3 中 的 搜索 表单 加 入 到 页 面 中 。 

这 个 表单 包含 一 个 文本 框 ， 供 用 户 输入 需要 搜索 的 内 容 的 关键 字 ， 还 包含 一 个 上 面 写 有 Search 
的 按钮 。 当 用 户 单 击 Search 按钮 时 ， 信 息 会 被 发 送 至 服务 器 ， 之 后 服务 器 会 处 理 数 据 并 为 用 户 生成 
一 个 新 页 面 ， 告 诉 用 户 哪 些 页 面 符合 搜索 条 件 ， 如 图 6-4 所 示 。 

浏览 器 在 将 数据 发 送 给 服务 器 时 ， 会 将 它们 转换 成 “名 称 / 值 ”对 的 形式 。 名 称 对 应 于 表单 控件 
的 名 称 ， 而 值 则 是 用 户 输入 的 内 容 或 某 个 被 选 定 项 的 值 。 每 个 表单 项 都 需要 同时 具备 名 称 和 值 。 如 
果 表 单 中 存在 5 个 文本 框 ， 则 需要 知道 哪 项 数据 对 应 于 哪个 文本 框 。 之 后 进行 处 理 的 应 用 程序 才 可 
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以 处 理 分 别 来 自 各 表单 控件 的 信息 。 
Te— 


GC OfieWFVHTML. 女 四 : 


Search the site 


Wlecaster in roe geen with hard case 


图 6-3 搜索 表单 图 6-4 ”生成 一 个 新 页 面 


如 下 是 图 6-3 中 简单 搜索 表单 的 代码 : 


<form action=" http://www.example.org/search.aspx " method="get"> 
<h3>Search the site</h3> 
<input type="text" name="txtSearchItem"> 
<input type="submit" value="Search"> 
</form> 
<form> 元 素 带 有 名 为 action 的 特性 ， 它 的 值 是 Web 服务 器 用 于 处 理 搜索 请 求 的 页 面 的 URL 地 
址 。 同 时 ，method 特性 指明 使 用 何 种 HTTP 方法 (get 与 post 两 者 之 一 ) 向 服务 器 发 送 表单 数据 。 


了 [ 漠 使 用 <form> 元 素 创建 表单 


表单 位 于 <form> 元 素 中 。<form> 元 素 还 可 以 包含 其 他 标记 ， 例 如 段落 、 标 题 等 。 但 是 ， 不 允许 
包含 男 一 个 <form> 元 素 。 页面 中 可 以 包含 任意 数量 的 表单 , 应 该 保持 <form> 元 素 间 相互 分 离 。 例如 ， 
可 以 有 登录 表单 、 搜 索 表单 以 及 报纸 订阅 表单 ， 这 些 表单 可 以 全 部 位 于 同一 页 面 中 。 如 果 一 个 页 面 
拥有 多 于 一 个 的 表单 ， 那 么 用 户 可 以 一 次 只 将 一 个 表单 的 数据 发 送 给 服务 器 。 

在 传统 网 页 中 ， 每 个 <form> 元 素 应 该 至 少 带 有 两 个 特性 : 

action method 

除了 通用 特性 以 外 ，<form> 元 素 还 可 以 包含 以 下 特性 : 

enctype novalidate target autocomplete accept-charset 


6.2.1 action 特性 


action 特性 指明 表单 提交 后 对 数据 的 处 理 。 通 常 ，action 特性 的 值 是 页 面 或 程序 ， 位 于 接收 信息 
的 Web 服务 器 上 。 

例如 ， 包 含 用 户 名 和 密码 的 登录 表单 ， 用 户 输入 的 详细 信息 被 传送 到 Web 服务 器 上 一 个 用 
ASPNET 编写 的 页 面 ， 叫 作 login.aspx。 这 里 的 action 特性 如 下 所 示 : 

-<form action="http://www.example.org/membership/login.aspx"> 
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6.2.2 method 特性 


表单 数据 可 以 通过 两 种 方式 发 送 给 服务 器 ， 每 种 方式 对 应 一 种 HITP 方法 。 
e@ get 方法 ， 将 数据 作为 URL 的 一 部 分 发 送 。 此 为 默认 值 。 
@ post 方法， 将 数据 隐藏 在 HTTP 头 中 。 


6.2.3 id 特性 


id 特性 可 以 唯一 标识 页 面 中 的 <form> 元 素 。 赋予 <form> 元 素 id 特性 是 一 种 良好 习惯 , 因为 很 多 
表单 使 用 样式 表 和 脚本 ， 要 求 使 用 id 特性 以 识别 表单 。 

id 特性 的 值 在 文档 中 应 该 是 唯一 的 ， 并 且 还 应 该 遵循 id 特性 的 其 他 取 值 规则 。 有 时 以 字符 frm 
作为 表单 的 id 和 name 特性 值 的 起 始 字符 ， 并 使 用 特性 值 的 剩余 部 分 描述 表单 所 收集 数据 的 类 型 ， 
例如 frmLogin 或 frmSearch。 


6.2.4 name 特性 


name 特性 是 id 特性 的 前 任 ， 而 且 和 id 特性 一 样 ， 取 值 在 文档 内 应 该 保持 唯一 。 现 在 不 需要 使 
用 这 个 特性 了 。 不 过 如 果 使 用 了 ， 可 以 赋予 与 id 特性 相同 的 值 。 


6.2.5 ”enctype 特性 

如 果 使 用 HTTP post 方法 向 服务 器 发 送 数 据 ， 则 可 以 使 用 enctype 特性 指定 浏览 器 在 将 数据 发 
送 到 服务 器 之 前 如 何 对 其 进行 编码 。 如 果 没 有 使 用 这 个 特性 ， 则 浏览 器 会 使 用 第 一 个 值 。 因 此 ， 只 
有 在 表单 允许 用 户 向 服务 器 上 传 文件 (如 图 片 )， 或 用 户 将 可 能 使 用 非 ASCI 字符 时 ， 才 需要 使 用 该 
特性 。 这 种 情况 下 ，enctype 特性 应 该 被 赋予 第 二 个 值 : 

enctype="multipart/form-data" 


6.2.6 ”accept-charset 特性 

不 同 语言 通过 不 同 的 “字符 集 ” 或 字符 组 书写 。 然 而 ， 在 创建 网 站 时 ， 开 发 人 员 不 会 将 网 站 设 
计 成 能 够 理解 所 有 语言 。accept-charset 特性 背后 的 思想 是 ， 使 用 该 特性 可 以 指定 一 系列 用 户 能 够 输 
入 、 服 务 器 可 以 处 理 的 字符 编码 。 该 特性 的 值 是 一 个 由 空格 或 逗号 分 隔 的 字符 集 列 表 。 例 如 ， 下 面 
的 代码 指明 服务 器 可 以 接收 UTF-8 编码 : 

accept-charset="utf-8" 

如 果 没 有 设置 accept-charset 特性 ， 那 么 任何 字符 集 都 是 有 效 的 。 


6.2.7 novalidate 特性 


novalidate 特性 是 一 个 布尔 特性 ， 用 以 指定 表单 在 提交 时 是 否 应 该 进行 校 验 。 如 果 该 特性 存在 ， 
则 浏览 器 不 应 该 在 提交 前 校 验 表单 。 
<fom 


novalidate > 
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支持 该 特性 的 浏览 器 有 Chrome 6+、Firefox 4+、Opera 10.6+ 以 及 I 下 10+。 


6.2.8 target 特性 


target 特性 指定 命名 窗口 或 关键 字 ， 用 于 处 理 表单 提交 。 
例如 ， 要 在 新 窗口 中 处 理 表单 ， 可 以 将 <form> 元 素 的 target 特性 设置 为 "_blank"。 
<fom 


action="http://www.example.org/membership/login.aspx" 
target="_blank"> 


6.2.9 autocomplete 特性 


该 特性 指明 浏览 器 是 否 应 该 自动 填写 表单 值 。 设 置 为 off 将 指明 浏览 器 不 应 该 自动 填写 任何 内 


容 。 默 认 值 为 on。 


<form 
action="http://www.example.org/membership/login.aspx”" 
autocomplete="off' > 


支持 该 特性 的 浏览 器 有 Chrome 17+、Firefox 4+， Safari 5.2+ 以 及 Opera 10.6+。 


<form> 元 素 中 不 同类 型 的 表单 控件 ， 用 于 收集 来 自 网 站 访问 者 的 信息 ， 包 括 文本 输入 控件 、 


按钮 、 复 选 框 与 单 选 按钮 、 选 择 框 、 文 件 选择 框 以 及 新 的 HTML5 表单 元 素 (如 进度 条 /度量 控件 、 隐 
藏 控件 )。 


6.3.1 文本 输入 控件 


“文本 输入 框 ”在 很 多 网 页 中 都 会 使 用 。“ 输 入 类 型 ”是 指 可 用 于 对 input 元 素 的 type 特性 进行 


设置 的 一 些 值 ， 以 指定 input 元 素 的 输入 类 型 。 


在 HTMLS5 之 前 ， 只 有 三 种 类 型 的 文本 输入 控件 可 供 表单 使 用 。 

e 单行 文本 输入 控件 : 用 于 只 需要 一 行 用 户 输入 的 条 目 。 这 类 控件 使 用 <input> 元 素 创建 ， 有 
时 被 简单 称 为 “文本 框 ”。 

e 密码 输入 控件 : 这 类 控件 与 单行 文本 输入 控件 类 似 ， 只 是 它们 会 将 用 户 输入 的 字符 遮盖 起 
来 ， 从 而 使 这 些 字符 在 屏幕 上 不 可 见 。 它 们 通常 会 使 用 星 号 (*) 或 圆 点 蔡 代 用 户 输入 的 每 个 
字符 ， 这 样 别 人 就 无 法 通过 简单 查看 屏幕 获得 用 户 输入 的 信息 。 密 码 输入 控件 主要 用 于 输 
入 登录 表单 的 密码 ， 或 用 于 信用 卡号 码 等 敏感 信息 的 输入 。 这 类 控件 同样 使 用 <input> 元 素 
创建 。 

e 多 行文 本 输入 控件 ， 在 需要 用 户 输入 可 能 多 于 单个 句子 长 度 的 细节 时 使 用 。 多 行 输入 控件 
使 用 <textarea> 元 素 创 建 。 
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HTML5 规 范 加 入 了 很 多 新 的 <input> 元 素 类 型 ,对 应 于 Web 上 各 种 常见 的 数据 类 型 .新 的 <input> 
元 素 列表 如 下 。 
e@ search: 用 于 Web 搜索 。 
e@ color: 用 于 使 用 色 盘 选择 颜色 。 
e date: 用 于 输入 日 历 日 期 。 
e ”datetime: 用 于 输入 时 区 为 “格林 尼 治 /国际 标准 时 间 ” 的 日 期 和 时 间 。 
e@ datetime-local: 用 于 输入 本 地 日 期 和 时 间 。 
。 email: 用 于 输入 单个 电子 邮件 地 址 或 电子 邮件 地 址 列表 。 多 个 电子 邮件 地 址 可 以 使 用 逗号 
分 隔 的 列表 形式 输入 。 
month: 用 于 输入 年 份 与 月 份 。 
e number: 用 于 数字 输入 。 
range: 与 其 他 各 种 文本 输入 控件 不 同 ， 该 控件 类 型 通常 会 以 拖 动 条 的 形式 呈现 ， 使 用 户 可 
以 从 一 个 数字 范围 内 选择 取 值 。 
search: 用 于 输入 搜索 词 。 
tel: 用 于 输入 电话 号 码 。 
time: 用 于 输入 由 时 、 分 、 秒 以 及 小 数秒 组 成 的 时 间 。 
url: 用 于 输入 网 站 URL。 
week: 用 于 输入 由 年 份 与 周 数 构成 的 日 期 。 例 如 2018-W01， 表 示 2018 年 的 第 一 周 。 
下 面 详细 介绍 各 种 类 型 的 文本 输入 控件 。 


1. 单行 文本 输入 控件 


最 基本 的 单行 文本 输入 控件 使 用 type 特性 值 为 text 的 <input> 元 素 创建 。 下 面 是 一 个 作为 搜索 框 
使 用 的 单行 文本 输入 控件 的 基础 示例 : 
<form action="http://Wwww.example.org/search.aspx" method="get" name="frmSearch"> 
<p>Search:<br> 
<input type="text" name="txtSearch" value="Search for' size="20" maxlength="64"></p> 

</form> 

图 6-5 为 这 个 单行 文本 输入 控件 在 浏览 器 中 的 展示 效果 。 
[ee 


口 单行 文 二 纺 和 近 件 x 用 二 
C Qifile/W/FVHTML- 女 日 : 


Search: 
Search for 


Spt | 


。 图 55 单行 文本 输入 控件 


表 6-1 列 出 了 当 <input> 元 素 的 type 特性 被 设置 为 text 时 ， 作 为 文本 输入 控件 可 以 包含 的 特性 。 
name 特性 在 这 里 所 起 的 作用 很 特殊 ， 不 同 于 到 目前 为 止 已 经 见 过 的 用 于 其 他 元 素 时 的 情况 。 
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表 6-1 标准 文本 输入 控件 的 特性 


特 性 作 用 

name 这 是 一 个 必要 特性 ， 用 于 为 向 服务 器 发 送 的 “名 称 / 值 ”对 提供 名 称 部 分 ( 记 住 ， 表单 中 的 每 个 控件 都 
以 “名 称 / 值 ”对 的 形式 表示 ， 其 中 名 称 标识 表单 控件 ， 而 值 则 是 用 户 输入 的 内 容 ) 

value 为 文本 输入 控件 提供 初始 值 ， 用 户 会 在 表单 加 载 后 看 到 该 值 。 应 该 只 有 在 加 载 页 面 时 希望 向 文本 输入 


控件 中 写 入 某 些 信息 的 情况 下 ， 才 使 用 该 特性 (比如 告知 用 户 应 输入 内 容 的 提示 信息 )。 不 过 新 的 
placeholder 特性 在 提示 信息 方面 做 得 更 好 。value 特性 还 可 以 用 于 脚本 编程 

size 允许 以 字符 为 单位 设置 文本 输入 控件 的 宽度 。 前 面 示例 中 搜索 框 的 宽度 是 20 个 字符 。size 特性 不 影 
响 用 户 可 以 输入 的 字符 数量 (在 前 面 的 例子 中 , 即使 size 特性 的 值 为 20, 用 户 也 依然 可 以 输入 40 个 字 
符 )。size 只 用 于 指定 输入 控件 有 多 少 个 字符 宽 。 如 果 用 户 输入 多 于 输入 控件 尺寸 的 字符 ， 他 们 就 可 以 
使 用 方向 键 向 左 或 向 右 滚动 以 查看 输入 的 内 容 


maxlength 允许 你 指定 用 户 在 文本 框 内 可 以 输入 的 最 大 字符 数量 。 通常 在 输入 达到 最 大 字符 数 之 后 ， 即 使 用 户 继 
续 ， 也 不 会 再 有 新 字符 添加 进去 
Placeholder 代表 一 段 作为 初始 值 显示 在 输入 区 域内 的 简短 描述 


当 <input> 元 素 的 type 特性 值 为 text 时 ， 它 还 可 以 具有 如 下 特性 : 全 部 通用 特性 、disabled、 
readonly、form、autocomplete、autofocus、list、pattem、required 以 及 dimame。 


2. 密码 输入 控件 


如 果 需 要 收集 敏感 数据 ， 如 密码 和 信用 卡 信息 ， 则 可 以 使 用 密码 输入 控件 。 密 码 输入 控件 通过 
使 用 圆 点 或 星 号 替换 用 户 在 屏幕 上 输入 的 字符 ， 对 信息 进行 谈 珊 。 这 样 一 来 ， 这 些 信息 对 于 在 用 户 
背后 偷窥 的 人 来 说 就 是 不 可 见 的 。 
密码 输入 控件 与 单行 文本 输入 控件 的 创建 方式 几乎 完全 相同 , 只 是 <input> 元 素 的 type 特性 值 变 
为 password。 
下 面 是 一 个 登录 表单 ， 其 中 包含 一 个 单行 文本 输入 控件 以 及 一 个 密码 输入 控件 : 
<form action="http://www.example.com/login.asp" method="post"> 
<p>Usemame:<br> 
<input type="text" name="txtUsemame" value="" size="20" maxlength="20"></p> 
<p>Password: 
<input type="password" name="pwdPassword" value="" size="20" maxlength="20"></p> 
<p><input type="submit" value="Log in"></p> 
</form> 
图 6-6 展示 了 用 户 开始 输入 细节 时 ， 浏 览 器 中 此 登录 表单 的 效果 。 
lx 


D ss x 有 二 i 
C OfleNF/HIML. 女 日 : 

Username: 

Password: 


Jegm, 


6-6 登录 表单 
密码 输入 控件 拥有 与 普通 文本 输入 控件 相同 的 特性 。 
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3. 多 行文 本 输入 控件 


使 用 <textarea> 元 素 可 以 创建 多 行文 本 输入 控件 。 如 下 是 一 个 使 用 多 行文 本 输入 控件 收集 网 站 访 
问 者 反馈 的 例子 : 
<fonm action—"http://www.example.org/feedback asp” method—"post"> 
<p>Please tell us what you think of the site and then click submit</p> 
<textarea name="txtFeedback" rows="20" cols="50"> Enter your feedback here.</textarea> 
</form> 
上 例 中 ， 对 <textarea> 元 素 内 的 文本 没有 进行 缩 进 。 任 何 写 在 <textarea> 开 闭 标签 之 间 的 内 容 都 
将 像 写 在 <pre> 元 素 中 一 样 对 待 ， 源 文档 中 的 格式 将 予以 保留 。 如 果 对 “Enter your feedback here” 这 
段 话 在 代码 中 进行 了 缩 进 ， 多 行文 本 输入 控件 同样 会 在 浏览 器 中 对 其 进行 缩 进 。 图 6-7 展示 了 多 行 
文本 输入 控件 的 效果 。 


[ei® ime 


D 多 行文 本 纺 入 控件 x 放 
GC © fileW/FVHTML5+CSS3/hs/chob/d 六 @ : 
Please tell us what you think of the site and then click submit: 


Enter your feedback here. 


Submit 


图 6.7 多 行文 本 输入 控件 
<textarea> 元 素 能 够 包含 的 特性 如 表 6-2 所 示 。 


表 6-2 ”<textarea> 元 素 的 常见 特性 


特 性 作 用 

name, 控件 的 名 称 ， 在 发 送 至 服务 器 的 “名 称 / 值 ” 对 中 使 用 

Tows | 用 于 指定 <textarea> 的 尺寸 。 它 可 以 指定 <textarea> 元 素 应 该 具有 的 文本 行 数 ， 因 此 对 应 于 文本 区 域 的 高 度 

cols 用 于 指定 <textarea> 的 尺寸 。 它 可 以 指定 文本 的 列 数 ， 因 此 对 应 于 输入 框 的 宽度 。 一 列 即 为 单个 字符 的 
平均 宽度 


表 6-3 中 展示 的 特性 是 新 添加 到 <textarea> 元 素 中 的 。 因 为 它们 是 新 特性 ， 所 以 其 中 一 些 在 各 浏 
览 器 中 的 支持 还 比较 有 限 。 总 体 来 说 ， 支 持 它们 的 浏览 器 包括 Firefox 4+、Safari 5.2+、Chrome 10+、 
Opera 10.6+ 以 及 下 10+。 
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表 6-3 ”<textarea> 元 素 的 新 特性 


特 性 作 用 
maxlength 用 户 可 输入 的 最 大 字符 数 
autofocus 布尔 特性 ， 指 定 所 在 元 素 应 在 页 面 加 载 后 获得 焦点 
required 布尔 特性 ， 指 定 输入 控件 是 否 是 必需 的 输入 元 素 
Placeholder 作为 向 用 户 显示 的 提示 信息 
dimame 为 文本 方向 提示 提供 名 称 
wrap 指定 文本 区 域内 的 文本 是 否 应 该 在 达到 cols 特性 指定 的 值 之 后 强制 换行 
disabled 布尔 特性 ， 用 于 禁用 文本 框 ， 阻 止 用 户 介入 
form 指定 与 <textarea> 元 素 关联 的 <form> 元 素 ， 值 为 所 关联 <form> 元 素 的 记 特 性 值 
Teadonly 布尔 特性 ， 指 定 用 户 是 否 可 以 编辑 


6.3.2 ”新 的 HTML5 输入 控件 类 型 与 特性 


本 节 将 介绍 新 的 HIML5 <input> 类 型 以 及 一 些 新 特性 。 这 些 特性 不 仅 可 以 改善 用 户 体验 ， 还 可 
以 使 用 户 摆脱 编写 大 量 JavaScript 代码 的 烦恼 。 包括 正 10 在 内 ， 所 有 主流 浏览 器 的 最 新 版 本 对 这 些 
元 素 及 特性 都 提供 了 支持 。 浏 览 器 会 将 任何 未 知 类 型 的 <input> 元 素 以 text 类 型 对 待 。 

使 用 旧 浏 览 器 时 需要 “ 填 平 剂 ”polyflD) 解 决 方案 。“ 填 平 剂 ” 是 一 些小 的 库 ， 通 常用 JavaScript 
编写 , 用 于 在 旧 浏览 器 中 提供 对 新 特性 的 支持 。 下 面 的 网 站 注册 表单 使 用 如 下 新 的 <input> 类 型 标记 : 
tel、url、email、date 以 及 color。 

<form action="http://www.example.org/feedback.asp" method="post"> 

<p>Name:<br> 

<input type="text" name="txtNamen value="" size="20" maxlength="20"></p> 
<p>Telephone Number:<br> 

<input type="tel" name="txtTel" value="" size="20" maxlength="20"></p> 
<p>Email:<br> 

<input type="email" name="txtEmail" value="" size="20" maxlength="20"></p> 

<p>Favorite Color<br 

<input type="color" name="txtColor' value="" size="20" maxlength="20"></p> 
<p>Date of Birth:<br> 

<input type="date" name="txtDate" value="" size="20" maxlength="20"></p> 
<p><input type="submit” value="Submit"></p> 

</form> 

图 6-8 展示 了 Google Chrome 浏览 器 中 这 个 网 站 注册 表单 的 效果 。 这 个 版 本 的 Chrome 同时 支 
持 date 以 及 color 类 型 标记 。 本 例 中 用 于 输入 日 期 的 日 历 控件 被 展开 ， 以 展示 这 些 新 的 文本 输入 类 
型 包含 多 么 强大 的 功能 。 在 引入 这 些 新 的 输入 控件 前 ， 创 建 类 似 的 日 期 选择 控件 需要 使 用 十 几 KB 
的 JavaScript 和 CSS 代码、 复杂 的 标记 以 及 多 张 图 片 。 而 使 用 浏览 器 提供 的 控件 则 具有 更 低 的 复杂 
性 ， 而 且 运 行 速度 也 更 快 ， 因 为 旧 的 JavaScript 日 期 选择 控件 所 需 的 所 有 各 种 文件 会 给 页 面 增加 额 
外 负担 。 

图 6-9 演示 了 这 些 输入 控件 在 Firefox 15 浏览 器 中 的 效果 , 该 版 本 不 支持 其 中 任何 一 种 输入 控件 
类 型 。 因 此 ， 它 们 看 上 去 与 标准 文本 输入 控件 完全 相同 ， 而 且 工作 起 来 也 完全 一 样 。 这 意味 着 即使 
没有 最 好 的 可 用 浏览 器 ， 也 仍然 能 够 在 表单 中 填 入 所 需 的 信息 。 
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DD see x EE 2 
C OHMscsYy. BO : 


Name: Name: 


Wi Telephone Number- 


Email: 
Email: 


Favorite Color: 
mm 


Favorite Color- 


Date of Birth: 
刻 Va/E | 
2018 年 0 月 ~ MIRAI Date of Birth: 
Pe E (Ey 
图 6.8 新 给 入 控件 在 Chrome 浏览 器 中 的 效果 图 6.9 新 输入 控件 在 Firefox 15 浏览 器 中 的 效果 


HIML5 中 输入 控件 的 其 他 新 特性 与 新 输入 控件 相同 ， 这 些 新 特性 以 浏览 器 提供 的 控件 ， 取 代 
Web 上 常见 的 交互 与 编程 模式 。 在 使 用 新 输入 控件 时 ， 要 假定 使 用 旧 浏 览 器 的 用 户 可 能 会 直接 以 文 
本 形式 填写 答案 ， 因 此 应 该 在 服务 器 端 准备 好 处 理 这 类 输入 。 而 在 使 用 这 些 新 特性 提供 的 功能 时 ， 
如 表单 校 验 ， 对 于 使 用 旧 浏 览 器 的 用 户 来 说 ， 需 要 使 用 JavaScript 或 其 他 技术 来 提供 支持 。 


1. 使 用 placeholder 特性 提供 示例 输入 


在 基本 输入 控件 中 ，value 特性 经 常 被 用 于 提供 输入 示例 。 这 种 技术 的 缺点 是 ,用 户 未 必 总 会 清 
空 示例 输入 内 容 , 因此 该 文本 经 常会 作为 数据 的 一 部 分 被 包含 进来 发 送 到 服务 器 。 为 修正 这 个 问题 ， 
需要 对 输入 控件 进行 脚本 编程 ， 使 其 既 可 以 显示 默认 值 ， 又 可 以 在 获得 焦点 后 停止 显示 。 焦 点 指明 
该 表单 元 素 当前 正 与 用 户 进行 交互 。 在 表单 元 素 获得 焦点 后 ，JavaScript 可 以 清除 输入 控件 中 的 值 ， 
并 为 用 户 输入 准备 好 该 表单 元 素 。placeholder( 占 位 符 ) 特 性 复制 了 这 种 行为 ， 而 且 不 需要 任何 脚本 
编程 。 

placeholder 特性 能 够 设置 占 位 符 文本 ， 就 如 同 在 HIML 4.01 中 设置 value 特性 一 样 。 该 特性 只 
用 于 简短 描述 ， 对 于 较 长 的 内 容 则 应 使 用 title 特性 。 与 HIML 4.01 的 区 别 是， 只 在 字段 为 空 且 尚未 
接收 焦点 时 才 会 显示 这 种 占 位 符 文本 。 一 旦 字段 得 到 输入 焦点 (例如 单 击 鼠 标 , 或 使 用 Tab 键 移动 到 
该 字段 ) 并 开始 输入 时 ， 该 文本 便 会 消失 。 如 下 代码 示例 展示 了 使 用 方法 : 

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters"> 

图 6-10 显示 了 placeholder 特性 在 Chrome 中 的 效果 。 

为 了 在 旧 浏 览 器 中 加 入 对 placeholder 的 支持 ， 需 要 添加 来 自 Placeholderjs 项 目 
Chttps://github.comyjiamesallardice/Placeholdersjs) 的 一 个 JavaScript 脚本 文件 ， 然 后 运行 一 小 段 
JavaScript 脚本 以 初始 化 该 支持 功能 。 

<scrip> 

加 二 
script> 
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2. 使 用 autocomplete 特性 确保 用 户 隐私 与 安全 


设置 autocomplete 特性 可 以 允许 网 页 作者 控制 是 否 缓存 表单 条 目 。autocomplete 特性 可 以 取 两 个 
不 同 的 值 : on 和 off。on 表示 表单 值 可 以 安全 地 保存 及 预 填写 。o 任 则 表示 不 应 该 保存 表单 值 。 下 面 
的 登录 表单 中 autocomplete 设置 为 off. 


<form action="http://www.example.conylogin.asp" method="post"> 
<p>Usemame:<br> 
<input type="text" name="txtUsemame" value="" size="20" 
maxlength="20" autocomplete="off’></p> 
<p>Password: 
<input type="password" name="pwdPassword" value="" size="20" 
maxlength="20" autocomplete="off'></p> 
<p><input type="submit" value="Log in"></p> 
</form> 


3. 使 用 required 特性 确保 提供 信息 


可 以 使 用 required 特性 确保 表单 必 填 字段 中 具有 内 容 后 ， 表 单 才 可 以 提交 。 它 代 蔡 了 以 前 用 
JavaScript 实现 的 那 种 基本 的 表单 验证 ， 提 高 了 可 用 性 且 节 省 了 开发 时 间 。 与 autofocus 特性 一 样 ， 
required 也 是 一 个 布尔 特性 。 下 面 这 个 简单 表单 演示 了 required 特性 的 用 法 。 如 图 6-11 所 示 ， 显 示 
了 在 required 输入 控件 留 空 时 ， 尝 试 提交 表单 的 结果 。 

<form action="http://www.example.org/feedback.asp" method="post"> 

<p>Name:<br> 
<input type="text" name="tx{Name" value="" size="20" maxlength="20" 
placeholder="Rob Larsen" required></p> 
<p><input type="submit" value="Submit"></p> 

</form> 

required 特性 在 Opera 9.5+、Firefox 4+、Safari 5+、Chrome 5+ 和 正 10 中 得 到 了 实现 。 因 此 , 在 
其 他 浏览 器 中 (如 正 低 版 本 ) 需 要 继续 编写 脚本 以 便 对 客户 端 完成 的 字段 进行 检查 。 


Name- 
Username |at hara Please fill out this field, 
Username | ] 
图 6-10 有 /无 焦点 时 的 placeholder 特性 效果 图 6-11 使 用 required 特性 


4. 使 用 autofocus 自动 获得 输入 焦点 


顾名思义 ， 添 加 autofocus 特性 的 input 字段 会 在 页 面 泻 染 时 自动 获得 焦点 。 与 placeholder 特性 
一 样 ，autofocus 也 是 以 前 需要 使 用 JavaScript 才能 实现 的 特性 。 

但 是 ， 传 统 的 JavaScript 方法 有 一 些 可 用 性 问题 。 例 如 ， 如 果 用 户 在 脚本 加 载 之 前 正在 进行 表 
单 输入 ， 当 脚本 完成 加 载 时 ， 会 发 现 输入 焦点 回 到 表单 的 第 一 个 字段 。HIML5 的 autofocus 特性 避 
免 了 这 一 问题 ， 文 档 一 旦 加 载 便 设 置 输入 焦点 ， 而 不 必 等 待 JavaScript 脚本 加 载 完毕 。 为 防止 这 种 
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可 用 性 问题 ， 最 好 将 autofocus 特性 用 于 目标 只 是 表单 的 页 面 ， 如 Google。 
autofocus 是 一 个 布尔 特性 ， 按 如 下 方式 实现 : 
<input type="text" name="first-name" id= "firstname" autofocus> 


所 有 现代 浏览 器 均 支持 autofocus 特性 ， 不 支持 该 特性 的 浏览 器 会 直接 忽略 它 。 


注意 : 

一 些 新 的 HTML5 表单 特性 是 布尔 特性 ， 这 意味 着 这 些 特性 是 根据 它们 是 否 存在 而 设置 的 。 它 
们 在 HTML5 中 可 用 以 下 几 种 方式 书写 : 

autofocus 

autofocus="™ 

autofocus="autofocus" 


5. pattem 


pattem 特性 指定 一 个 正则 表达 式 ， 以 便 用 它 对 字段 的 值 进行 检查 。pattern 特性 使 得 开发 人 员 能 
够 轻松 实现 对 产品 码 、 发 票 号 等 的 一 些 特定 验证 。pattem 特性 的 使 用 范围 十 分 广泛 ， 以 下 是 一 个 用 
于 产品 号 的 简单 示例 。 

<label> Product Number: 

<input pattem="[0-9][A-2]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/> 

</label> 

该 模式 规定 ， 产 品 号 应 该 是 一 个 数字 [0-9] 后 跟 三 个 大 写字 母 [A-Z]{3}。 与 required 特性 一 样 ， 
支持 pattem 特性 的 浏览 器 仅 有 Opera 9.5+、Firefox 4+、Safari 5+ 以 及 Chrome 5+。 Intermet Explorer 10 
也 支持 pattem 特性 。 


6. list 特性 与 datalist 元 素 


list 特性 让 用 户 能 够 将 一 个 选项 列表 与 特定 的 字段 关联 在 一 起 。list 特性 的 值 必 须 与 同一 文档 中 
某 个 datalist 元 素 的 ID 相同 。datalist 元 素 是 HTMLS5 中 的 新 成 员 ， 表 示 可 用 于 表单 控件 的 预定 义 的 
选项 列表 ， 工 作 方 式 类 似 于 浏览 器 中 的 搜索 框 ， 能 随 输入 自动 完成 ， 如 图 6-12 所 示 。 


[ar nmdl ©] 
| Suggestions 
htm5 
htm5 video 
| html5 eamples 
htm5 vs flash 
html5 canvas 
htmlS browser support 
html5 doctype 
html5 firefox 
htmi5 tutorial 
html5 video tag 
| v Google 
Yahool 


Find "html5" on This Page (0 matches) 


图 6-12 Safari 中 Google 搜索 的 自动 建议 
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以 下 示例 演示 了 list 特性 与 datalist 元 素 相 结合 的 方式 ， 效 果 如 图 6-13 所 示 。 


<label>Your favorite fruit: 
‘<option value="Blackcurrant">Blackcurrant</option> 
<option value="Blueberry">Blueberry</option> 
< 一 … 一 

</datalist> 

If other, please specify: 

<input type="text" name="fruit" list="fiuits"> 

</label> 


通过 在 datalist 中 添加 select 元 素 ， 要 比 简单 地 使 用 option 元 素 能 够 提供 更 卓越 的 优雅 降级 。 


<label>Your favorite fruit 

<datalist id="fruits"> 
<select name="fiuits"> 
‘<option value="Blackberry">Blackbeny</option> 
<option value="Blackcurrant">Blackcurrant</option> 
‘<option value="Blueberry">Blueberry</option> 
ms 

</select> 

If other, please specify: 

</datalist> 

<input type="text" name="fruit" list="fruits"> 

</label> 


目前 支持 list 特性 和 datalist 元 素 的 浏览 器 仅 限于 Opera 9.5+ 和 Firefox 5+。Internet Explorer 10 
在 将 来 会 支持 list 特性 和 datalist 元 素 。 


Your favourite fruit: 


图 6-13 ”Opera 中 泻 染 的 datalist 元 素 


7. multiple 


通过 运用 布尔 特性 multiple 可 以 使 list 特性 和 datalist 元 素 更 进一步 ， 以 允许 输入 datalist 元 素 中 
的 多 个 值 。 以 下 是 一 个 示例 。 

<label>Your favorite fruit: 

<datalist id="fruits"> 
<select name="fruits"> 
<option value="Blackberry">Blackberry</option> 
<option value="Blackcurrant">Blackcurrant</option> 
‘<option value—"Blueberry">Blueberry</option> 
ee 
</select> 

If other, please specify: 

</datalist> 
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<input type="text" name="fruit" list="fruits" multiple> 

</label> 

multiple 特性 并 不 是 专门 为 datalist 元 素 而 使 用 的 ， 另 一 个 使 用 multiple 特性 的 例子 是 给 朋友 发 
送 邮 件 时 的 多 个 E-Mail 地 址 或 是 多 个 附件 文件 ， 如 下 所 示 : 

<label>Upload files: 

<input type="file" multiple name="upload"></label> 

multiple 特性 在 Firefox 3.6+、Safari 4+、Opera 11.5+ 以 及 Chrome 4+ 中 已 得 到 支持 ， 也 即将 被 
Internet Explorer 10 所 支持 。 


8. novalidate 与 formnovalidate 


novalidate 和 formnovalidate 特性 表示 表单 提交 时 不 需要 进行 验证 。 它 们 都 是 布尔 特性 。 
formnovalidate 特性 能 够 运用 于 submit 或 image 类 型 的 input 元 素 ， 而 novalidate 特性 只 能 对 form 元 
素 进行 设置 。 
formnovalidate 特性 的 运用 示例 是 “保存 草稿 ”按钮 ， 其 中 表单 具有 一 些 提交 时 是 “required” 
字段 ， 而 在 保存 草稿 时 却 不 必 如 此 。novalidate 特性 可 以 被 运用 于 这 样 的 场合 : 不 希望 对 表单 进行 验 
证 ， 但 希望 利用 更 有 用 的 用 户 界 面 以 提供 新 的 输入 类 型 。 
以 下 示例 演示 了 如 何 使 用 formnovalidate 特性 : 
<form action="process.php"> 
<label for="email">Email:</label> 
<input type="text" name="email" value="gordo(@example.com"> 
<input type="submit" formnovalidate value="Submit"> 
</form> 
以 下 示例 演示 了 如 何 使 用 novalidate 特性 : 
<fom action="process.php" novalidate> 
<label for="email">Email:</label> 
<input type="text" name="email" value="gordo(@example.com"> 
</form> 


9. form 特性 


form 特性 (注意 ， 这 是 特性 而 不 是 form 元 素 ) 用 于 将 input、select 或 textarea 元 素 与 一 个 表单 ( 称 
为 这 些 元 素 的 表单 所 有 者 ) 关 联 起 来 。 使 用 form 特性 意味 着 ， 该 元 素 不 必 作 为 关联 表单 的 子 元 素 ， 
并 且 可 以 被 移 到 远离 源 表单 的 其 他 地 方 。form 特性 的 主要 运用 场合 是 ， 放 在 表格 中 的 input 按钮 现 
在 可 以 与 表单 关联 起 来 。 

<input type="button" name—"sort-l-h" form="sort"> 


10. formaction、formenctype、formmethod 以 及 formtarget 


特性 formaction、formenctype、formmethod 以 及 formtarget 都 在 form 元 素 上 有 相应 的 特性 。 引 
入 这 些 新 特性 主要 是 因为 ， 用 户 可 能 对 不 同 的 提交 按钮 采取 不 同 的 动作 ， 以 避免 在 一 个 文档 中 有 多 
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个 表单 。 下 面 对 各 个 特性 做 简要 介绍 。 

e@ ”formaction( 表 单 动作 ) 

用 于 指定 对 表单 进行 处 理 的 文件 或 应 用 程序 , 效果 等 同 于 form 元 素 的 action 特性 ,， 并且 只 能 用 
于 提交 或 图 像 按钮 (即使 用 了 type="submit" 或 type="image" 的 input 元 素 )。 当 表单 被 提交 时 ， 浏 览 
器 首先 会 检查 formaction 特性 ， 如 果 没 有 这 个 特性 ， 则 进一步 查找 表单 的 action 特性 。 

<input type="submit" value="Submit" formaction="process.php"> 

@ ”formenctype( 表 单 编码 类 型 ) 

用 于 说 明 在 使 用 POST 方法 类 型 时 如 何 对 表单 数据 进行 编码 ， 效 果 等 同 于 form 元 素 的 enctype 
特性 ， 并 且 只 能 用 于 提交 或 图 像 按 钮 (即使 用 了 type="submit" 或 type="image" 的 input 元 素 )。 不 包含 
该 特性 时 ， 其 默认 值 为 application/x-www-form-urlencoded。 

<input type="submit" value="Submit" fonmenctype="application/x-www-form-urlencoded"> 

e@ formmethod( 表 单 提交 方法 ) 

用 于 指定 使 用 哪 一 种 HTTP 方法 (GET、POST、PUT 和 DELETE) 来 提交 表单 数据 ， 效 果 等 同 于 
form 元 素 的 method 特性 ， 并 且 只 能 用 于 提交 或 图 像 按钮 (即使 用 了 type="submit" 或 type="image" 的 
input 元 素 )。 

<input type="submit" value="Submit" fommethod-"POST"> 

e@ ”formtarget( 表 单 目 标 ) 

用 于 为 表单 结果 指定 目标 窗口 ， 效 果 等 同 于 form 元 素 的 target 特性 ， 并 且 只 能 用 于 提交 或 图 像 
按钮 (即使 用 了 type="submit" 或 type="image" 的 input 元 素 )。 

<input type="submit" value="Submit" formtarget="_self’> 


6.3.3 按钮 


按钮 最 常 被 用 于 提交 表单 。 不 过 ， 它 们 有 时 也 被 用 于 清除 或 重 置 表单 ， 甚 至 触发 客户 端 脚 本 。 
可 以 通过 三 种 方式 创建 按钮 : 

@ 使 用 <input> 元 素 ， 并 且 type 特性 的 值 为 submit、reset 或 button。 

e@ 使 用 <inpuf> 元 素 ， 并 且 type 特性 的 值 为 image。 

@ ”使 用 <button> 元 素 。 

使 用 每 种 不 同方 法 时 ， 按 钮 的 表现 也 会 稍 有 区 别 。 


1. 使 用 <input> 元 素 创建 按钮 


当 使 用 <input> 元 素 创建 按钮 时 ， 所 创建 的 按钮 类 型 需要 使 用 type 特性 进行 指定 。type 特性 可 以 
取 如 下 值 来 创建 按钮 : 

esubmit， 创 建 一 个 单 击 时 提交 表单 的 按钮 。 

日 Ieset， 创 建 一 个 按钮 ， 它 能 自动 重 置 表 单 控件 ， 将 它们 设置 为 页 面 载 入 时 采用 初始 值 。 

e button， 创 建 一 个 用 于 在 用 户 单 击 时 触发 客户 端 脚本 的 按钮 。 

下 面 是 一 个 包含 全 部 三 种 按钮 的 示例 : 


<form action="http://Wwww.example.org/feedback.aspx” method="post"> 
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<p><input type="submit" name="btnVoteRed" value="Vote for reds"></p> 

<p><input type="submit" name="binVoteBlue" value="Vote for blues"></p> 

<p><input type="reset" value="Clear form"></p> 

<p><input type="button" value="Calculate" onclick="calculate|)"></p> 
</form> 


这 些 按钮 在 Firefox 浏览 器 中 的 效果 如 图 6-14 所 示 。 按 钮 的 常用 特性 如 表 6-4 所 示 。 
表 6-4 按钮 的 常用 特性 


特 性 作 用 
type 指定 所 需 的 按钮 类 型 ， 可 取 如 下 三 者 之 一 : submit、reset 或 button 
name 为 按钮 提供 名 称 。 如 果 同一 表单 中 有 多 于 一 个 的 按钮 ， 只 需要 为 按钮 添加 name 特性 (这 样 就 可 以 帮助 确 
定单 击 的 是 哪个 按钮 )。 不 过 ， 无 论 何 种 情况 都 赋予 按钮 名 称 ， 指 明 按钮 所 起 作用 的 做 法 ， 被 认为 是 一 种 
良好 实践 
value 允许 指定 按钮 上 显示 的 文本 。 如 果 提 供 了 name 特性 ，value 特性 的 值 会 作为 按钮 控件 的 “名 称 / 值 ”对 的 


一 部 分 被 发 送 至 服务 器 。 如 果 没 有 提供 值 ， 则 不 会 有 按钮 控件 的 “名 称 / 值 ”对 被 发 送 到 服务 器 


submit、reset 及 button 类 型 的 <input> 元 素 的 新 特性 如 表 6-5 所 示 。 


表 6-5 submit、reset 及 button 类 型 的 <input> 元 素 的 新 特性 


元 素 关联 的 <form> 元 素 ， 值 为 所 关联 <form> 元 素 的 记 特 性 值 


2. 使 用 图 片 按钮 


可 以 使 用 图 片 作为 按钮 ， 取 代 浏 览 器 泻 染 的 标准 按钮 。 创 建 图 片 按钮 与 创建 任何 其 他 类 型 的 按 
钮 类 似 ， 只 是 type 特性 的 值 为 image: 

<input type="image" sre="submitjpg” alt="Submit" name="btnImage"> 

因为 创建 的 按钮 带 有 图 片 ， 所 以 需要 两 个 额外 特性 ， 如 表 6-6 所 示 。 


表 6-6 image 类 型 的 <input> 元 素 的 重要 特性 


特 性 作 用 

ste 指定 图 片 文件 的 来 源 

alt 为 图 片 提 供 苦 换文 本 。 在 图 片 无 法 找到 时 将 显示 该 信息 ， 同 时 语音 浏览 器 会 将 该 信息 朗读 给 使 用 者 
height 指定 图 片 高 度 

width 指定 图 片 宽度 


除了 表 6-6 提 到 的 特性 以 及 全 局 特性 外 ， 该 输入 控件 类 型 还 支持 如 下 特性 : disabled、form、 
formaction、autofocus、formenctype、formmethod、formtarget 以 及 formnovalidate。 

如 果 图 片 按钮 拥有 name 特性 ， 在 单 击 之 后 ， 浏 览 器 会 将 “名 称 / 值 ” 对 发 送 至 服务 器 。 名 称 是 
为 name 特性 提供 的 值 ， 而 值 则 是 用 户 单 击 按钮 时 的 x 及 y 坐标 值 对 。 
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在 图 6-15 中 可 以 看 到 一 个 图 片 按钮 。Firefox 与 下 都 会 在 用 户 鼠 标 悬 浮 于 这 类 按钮 上 时 ， 改 变 
光标 形状 ， 以 提示 用 户 可 以 单 击 。 
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图 6-14 三 种 按钮 图 6-15 图 片 按钮 


3. 使 用 <button> 元 素 创建 按钮 
<button> 元 素 的 引入 时 间 相 对 较 晚 , 它 允 许 指定 <button> 开 始 标签 与 <button> 结 束 标 签 之 间 用 于 
显示 在 按钮 上 的 内 容 ， 从 而 可 以 在 二 者 间 包 含 文本 标记 或 图 片 元 素 。 
浏览 器 为 按钮 提供 了 一 种 浮雕 (或 3D) 效 果 ， 以 模拟 按钮 按 下 时 的 上 下 动作 。 
下 面 是 一 些 使 用 <button> 元 素 的 示例 。 
<form action="http://www.example.org/feedback.aspx" method="post"> 
<p> <button type="submit">Submit</button> </p> 
<p> <button type="reset"><b>Clear this form</b> I want to start again</button> </p> 
<p> <button type="button"><img sre="submit gif' alt="submit"></button> </p> 
</form> 


第 一 个 提交 按钮 只 包含 文本 , 第 二 个 重 置 按钮 包含 文本 及 其 他 标记 (以 <b> 元 素 的 形式 ), 而 第 三 


个 按钮 则 包含 一 个 <img> 元 素 。 
图 6-16 展示 了 这 些 按钮 的 效果 。 
除了 上 面 介绍 的 特性 以 及 全 局 特性 以 外 ，<button> 元 素 还 支持 如 下 特性 ，disabled、name、 


autofocus 以 及 value。 


图 6-16 按钮 的 效果 


6.3.4 ” 复 选 框 
复 选 框 类 似 于 电灯 开关 ， 状 态 或 者 是 开 ， 或 者 是 关 。 在 被 选中 时 即 处 于 开 状态 一 一 用 户 可 以 通 


过 简单 单 击 复 选 框 使 其 在 开 与 关 两 种 状态 间 切 换 。 
复 选 框 可 以 单独 出 现 ， 此 时 每 一 个 复 选 框 都 有 自己 的 名 称 ; 或 者 也 可 以 作为 复 选 框 组 出 现 ， 此 


时 它们 共享 控件 名 称 ， 并 允许 用 户 为 同一 特性 选择 多 个 值 。 
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在 需要 允许 用 户 进行 如 下 操作 时 ， 复 选 框 是 理想 的 表单 控件 : 
@ 使 用 单一 控件 提供 简单 的 “是 ”或 “ 否 ” 答 案 (比如 是 否 接受 条 款 与 条 件 )。 
e 从 一 个 可 能 选项 列表 中 选择 多 个 条 目 (比如 希望 用 户 从 给 出 的 列表 中 指定 具有 全 部 技能 )。 
复 选 框 通过 type 特性 值 为 checkbox 的 <input> 元 素 创建 。 如 下 是 一 个 多 复 选 框 使 用 同一 控件 名 
称 的 示例 : 
<form action="http://www.example.com/cv.aspx" method="get" name="frmCV"> 
Which of the following skills do you possess? Select all that apply.<br> 
<input type="checkbox" name="chkSkills" value="html">HTML <br> 
<input type="checkbox" name="chkSkills" value="CSS">CSS<br> 
<input type="checkbox" name="chkSkills" value="JavaScript">JavaScript<br> 
<input type="checkbox" name="chkSkills" value="aspnet">ASP.Net<br> 
<input type="checkbox" name="chkSkills" value="php">PHP 
</form> 
图 6-17 展示 了 浏览 器 中 上 述 代码 的 效果 。 注意 每 个 复 选 框 之 后 都 有 换行 ,因此 每 一 个 复 选 框 都 
可 以 清晰 地 处 于 各 自行 内 。 
因为 被 选择 的 所 有 技能 都 将 以 “名 称 / 值 ”对 的 形式 发 送 到 应 用 程序 进行 处 理 ， 所 处 如 果 有 人 选 
择 多 于 一 项 的 技能 ， 则 会 有 多 个 共享 同一 名 称 的 “名 称 / 值 ”对 被 发 送 到 服务 器 。 
与 此 相对 ， 下 面 是 单个 复 选 框 ， 所 起 作用 类 似 于 选择 简单 的 “是 ”或 “ 否 ”: 
<form action="http://www.example.org/accept.aspx" name="frmTandC" method="get"> 
<input type="checkbox" name="chkAcceptTerms" checked> 
Iaccept the <a href="terms.htm">terms and conditions</a>.<br> 
<input type="submit"> 
</form> 
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图 6-17 复 选 框 的 效果 


创建 此 复 选 框 的 <input> 元 素 不 带 有 value 特性 。value 特性 默认 情况 下 值 为 on。 在 本 例 中 , 还 可 
以 看 到 一 个 布尔 特性 ， 名 为 shecked， 用 于 指定 当 页 面 加 载 后 ， 复 选 框 是 否 处 于 选 定 状 态 。 表 6-7 展 
示 了 type 特性 值 为 checkbox 的 <input> 元 素 可 以 包含 的 常用 特性 。 


表 6-7 checkbox 类 型 的 <input> 元 素 的 重要 特性 


特 性 作 用 
type 指明 要 创建 复 选 框 
name | 赋予 控件 名 称 。 多 个 复 选 框 可 共享 同一 名 称 ， 但 这 只 适用 于 希望 用 户 能 够 从 同一 列表 中 选择 多 个 选 
项 的 情况 一 一 此 时 它们 应 该 在 表单 中 顺序 放置 
value | 复 选 框 被 选 定时 应 该 发 送 到 服务 器 的 值 
checked 指明 页 面 加 载 后 复 选 框 应 该 被 选 定 
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复 选 框 还 可 以 带 有 如 下 特性 : 全 部 通用 特性 、disabled、form、autofocus 以 及 required。 


6.3.5 “ 单 选 按钮 


单 选 按钮 与 复 选 框 类 似 ， 也 只 有 开 和 关 两 种 状态 。 但 二 者 有 两 个 关键 区 别 : 
® 当 一 组 单 选 按钮 共享 同一 名 称 时 ， 只 有 其 中 之 一 可 以 被 选 定 。 当 一 个 单 选 按钮 被 选 定 后 ， 
如 果 用 户 又 单 击 了 另 一 选项 ， 则 新 的 选项 被 选 定 ， 而 旧 选 项 则 失去 选 定 状态 。 
e@ 不 应 将 单 选 按钮 作为 指定 开 或 关 的 单一 表单 控件 使 用 ， 因 为 当 单 个 单 选 按钮 被 选 定 后 ， 就 
无 法 再 次 失去 选 定 状态 (在 不 使 用 脚本 控制 的 情况 下 )。 
因此 ， 一 组 单 选 按钮 对 于 希望 向 用 户 提供 多 个 选项 ， 又 必须 只 选择 一 项 的 情况 是 理想 的 选择 。 
这 种 情况 的 一 种 蔡 代 方案 是 使 用 下 拉 选 择 框 ， 允 许 用 户 从 多 个 选项 中 选择 其 中 一 项 。 选 择 使 用 下 拉 
选择 框 还 是 单 选 按钮 组 ， 依 赖 于 以 下 三 点 。 
e 用 户 预期 ; 如果 表 单 是 为 了 模仿 一 种 纸 质 表单 ， 其 中 呈献 给 用 户 一 些 复 选 框 ， 而 他 们 只 能 
选择 其 中 一 项 ， 这 种 情况 下 应 该 使 用 单 选 按 钮 组 。 
e@ 看 到 所 有 选项 ， 如 果 用 户 可 以 在 选择 前 看 到 所 有 选项 ， 则 应 该 使 用 单 选 按钮 组 。 
@ 空间， 如 显示 在 移动 设备 上 ， 下 拉 选 择 框 占用 的 空间 要 远 小 于 单 选 按钮 组 。 
单 选 按钮 同样 使 用 <input> 元 素 创建 ， 这 一 次 type 特性 的 值 应 该 为 radio。 例 如 ， 下 面 的 单 选 按 
钮 被 用 于 允许 用 户 选择 希望 进行 的 旅行 等 级 : 
<form action="http://www.example comyflights aspx" name="frmFlightBooking"method="get"> 
Please select which class of travel you wish to fy: <br> 
<input type="radio" name="radClass" value="First">First class <br> 
<input type="radio" name="radClass" value="Business">Business class <br> 
<input type="radio" name="radClass" value="Economy">Economy class <br> 
</form> 
只 允许 用 户 选择 三 个 选项 中 的 一 项 ， 所 以 单 选 按钮 是 理想 选择 。 同 样 可 以 使 用 字母 rad 作为 音 
选 按钮 名 称 的 起 始 部 分 。 图 6-18 展示 了 浏览 器 中 的 效果 。 
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图 6-18 单 选 按钮 的 效果 
表 6-8 列 出 了 type 特性 值 为 radio 时 <input> 元 素 的 常用 特性 。 


表 6-8 单 选 按钮 的 常用 特性 


特 性 作 用 

be 指明 要 创建 单 选 按钮 

| 厂子 控 件 名 称 

本 | 用 于 指定 轩 项 被 选 定 后 将 发 送 至 服务 器 的 值 

ei 指明 选项 是 否 应 该 在 页 面 加 载 后 默认 选 定 。 需要 记 住 ， 在 使 用 单个 单 选 按钮 时 ， 使 用 该 特性 没有 意 


义 ， 因 为 用 户 无 法 解除 选 定 状态 
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单 选 按钮 还 可 以 带 有 如 下 特性 : disabled、form、autofocus、required 以 及 全 部 通用 特性 。 


6.3.6 ”下 拉 选 择 框 


下 拉 选 择 框 使 用 户 可 以 从 下 拉 菜 单 中 选择 一 个 条 目 。 下 拉 选 择 框 可 以 占用 比 单 选 按钮 组 小 得 多 
的 空间 。 下 拉 选 择 框 还 可 以 作为 当 使 用 单行 文本 输入 控件 ， 但 又 希望 限制 用 户 输入 选项 时 的 蔡 代 方 
案 。 使 用 下 拉 选 择 框 可 以 控制 用 户 能 够 输入 的 选项 。 

下 拉 选 择 框 包含 于 <select> 元 素 内 ， 列 表 中 的 每 一 个 选项 包含 于 一 个 <option> 元 素 内 。 例 如 ， 如 
下 表单 创建 了 一 个 供用 户 选择 颜色 的 下 拉 选 择 框 : 

<select name="selColor"> 

-<option selected="selected" value="">Select color</option> 
<option value="red">Red</option> 

<option value="green">Green</option> 

<option value="blue">Biue</option> 

</select> 

从 上 述 代 码 中 可 以 看 到 ， 位 于 <option> 开 始 标 签 与 </option> 结 束 标签 之 间 的 文本 用 于 向 用 户 显 
示 选 项 。 而 选 定 选项 后 将 发 送 到 服务 器 的 值 则 通过 value 特性 赋予 。 第 一 个 选项 没有 值 ， 而 且 内 容 
为 “Select color”。 该 选项 用 于 告知 用 户 必 须 从 列表 中 选择 一 种 颜色 。 上 述 示例 中 将 字母 sel 作为 下 
拉 选 择 框 名 称 的 起 始 部 分 。 

图 6-19 展示 了 下 拉 选 择 框 在 浏览 器 中 的 效果 。 

下 拉 选 择 框 的 宽度 是 向 用 户 显示 的 选项 中 最 长 选项 的 宽度 。 在 本 例 中 是 文本 “Select color” 的 
宽度 。 此 外 ， 还 可 以 使 用 CSS 更 改 下 拉 选 择 框 的 宽度 。 
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图 6-19 下 拉 选 择 框 的 效果 


1. <select> 元 素 
<selec 人 > 元 素 是 下 拉 列 表 框 的 包含 元 素 。 它 可 以 具有 的 常用 特性 如 表 6-9 所 示 。 


表 6-9 <select> 元 素 的 常用 特性 
特 性 作 用 
name 控件 的 名 称 
size 如 你 稍 后 将 看 到 的 ， 访 特性 用 于 滚动 列表 框 的 呈现 。 该 特性 的 值 是 列表 中 同时 可 见 的 行 数 
multiple 这 个 布尔 特性 使 用 户 可 以 在 下 拉 菜 单 中 选择 多 个 条 目 。 如 果 未 提供 该 特性 ， 则 用 户 只 能 选择 一 
个 条 目 。 该 特性 的 使 用 会 改变 下 拉 选 择 框 的 呈现 
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下 拉 选 择 框 还 可 以 包含 以 下 特性 :disabled、form、autofocus、required 以 及 全 部 通用 特性 。 
2. <option> 元 素 


在 任何 <select> 元 素 内 ， 都 可 以 找到 至 少 一 个 <option> 元 素 。 位 于 <option> 开 始 标签 与 </option> 
结束 标签 之 间 的 文本 会 作为 选项 的 标签 显示 给 用 户 。<option> 元 素 可 以 包含 的 常用 特性 如 表 6-10 
所 示 。 


表 6-10 <option> 元 素 的 常用 特性 


特 性 作 用 
value 选项 被 选中 时 发 送 给 服务 器 的 值 
selected | 这 个 布尔 特性 所 在 的 选项 应 该 在 页 面 加 载 后 作为 初始 选择 值 。 即 使 <select> 元 素 未 带 有 multiple 特性 ， 
该 特性 也 可 以 同时 用 于 多 个 <option> 元 素 
label 为 选项 加 标签 的 另 一 种 方式 ， 使 用 该 特性 而 非 元 素 内 容 。 该 特性 在 使 用 <optgroup> 元 素 时 特别 有 用 ， 


在 稍 后 的 “使 用 元 素 分 组 选项 ”部 分 会 进行 介绍 


布尔 特性 ， 禁 用 选项 ， 阻 止 用 户 介入 


3. 创建 滚动 选择 杠 


创建 滚动 菜单 ， 使 用 户 能 同时 在 下 拉 选 择 框 中 看 到 所 有 选项 中 的 一 部 分 。 为 实现 这 一 功能 ， 只 
需要 在 <select> 元 素 中 加 入 size 特性 。size 特性 的 值 是 希望 同一 时 间 可 见 的 选项 数量 。 
尽管 滚动 选择 框 很 少 使 用 ， 但 它 可 以 向 用 户 指出 ， 存 在 多 个 向 他 们 开放 的 可 能 选项 ， 并 且 使 他 
们 可 以 看 到 这 些 选项 中 的 一 部 分 。 下 面 是 一 个 让 用 户 选择 一 周 中 某 一 天 的 滚动 选择 框 : 
<form action="http://www.example.org/days.aspx" name="frmDays" method="get"> 
<select size="4" name="selDay"> 
<option value="Mon">Monday</option> 
<option value="Tue">Tuesday</option> 
<option value="Wed">Wednesday</option> 
<option value="Thu">Thursday</option> 
<option value="Fri">Friday</option> 
<option value="Sat">Saturday</option> 
<option value="Sun">Sunday</option> 
</select> 
<br><br><input type="submit" value="Submit"> 
/form> 


如 图 6-20 所 示 ， 通 过 滚动 选择 框 用 户 可 以 清楚 地 看 到 他 们 拥有 一 些 选 项 。 为 节省 空间 ， 只 有 一 
部 分 可 用 选项 被 显示 出 来 。 

4. 使 用 multiple 特性 选择 多 个 选项 

multiple 特性 允许 用 户 从 下 拉 选 择 框 中 选择 多 于 一 个 选项 。 在 使 用 该 特性 时 应 该 知道 如 何 选择 
多 个 选项 : 按 住 Ctrl 键 ， 然 后 单 击 想 要 选择 的 选项 。 


该 特性 的 一 个 附加 功能 是 ， 能 够 自动 将 下 拉 选 择 框 变 成 类 似 滚动 选择 框 的 样子 。 下 面 是 一 个 允 
许 用 户 选择 一 周 中 多 天 的 下 拉 选 择 框 : 
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<form action="http://www.example.org/days.aspx" method—"get" name—"fimDays"> 
Please select more than one day of the week (to select multiple days 
hold down fhe control key and click on your chosen days):<br> 
<select name="selDays" multiple> 
<option value="Mon">Monday</option> 
<option value="Tue">Tuesday</option> 
<option value="Wed">Wednesday</option> 
<option value="Thu">Thursday</option> 
<option value="Fri">Friday</option> 
<option value="Sat">Saturday</option> 
<option value="Sun">Sunday</option> 
</select> 
<br><br><input type="submit" value="Submit"> 
</form> 


效果 如 图 6-21 所 示 。 可 以 看 到 ， 即 使 没有 额外 的 size 特性 ， 下 拉 选 择 框 仍然 以 与 滚动 选择 框 相 
同 的 形式 呈现 。 
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图 6-20 滚动 选择 框 图 6-21 类似 于 滚动 选择 框 的 下 拉 选 择 框 


5. 使 用 <optgroup> 元 素 分 组 选项 

如 果 下 拉 选 择 框 中 的 选项 很 多 ， 则 可 以 使 用 <optgroup> 元 素 对 它们 进行 分 组 。 其 作用 就 像 一 个 
容器 元 素 ， 包 含 需要 归 入 同一 组 中 的 元 素 。 

<opteroup> 元 素 需要 带 有 label 特性 ， 它 的 值 是 选项 分 组 的 标签 。 在 下 例 中 ， 可 以 看 到 选项 是 如 
何 按照 设备 类 型 分 组 的 : 

<fom action="http://www.example.org/info.aspx" method="get" name="frminfo"> 


Please select the product you are interested in:<br> 
<select name="selInformation"> 


<option value="Games">Games</option> 
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不 同 的 浏览 器 显示 <opteroup> 元 素 的 方式 也 不 尽 相同 。 图 6-22 展示 的 是 Safari 浏览 器 中 显示 的 
<optgroup> 元 素 持 有 的 选项 ， 图 6-23 展示 的 是 Firefox 浏览 器 中 显示 的 结果 。 


Ele Ed Yow Hsory Bookmaks Inak Heb 全 


Broduct you are interested in: 


Hardware 
Daskiop computers 
Lapiop computers 
Soimware 


图 6-22 Safari 浏览 器 中 的 显示 结果 图 623 Firefox 浏览 器 中 的 显示 结果 


6. 下 拉 选 择 框 的 特性 


以 下 是 <select> 元 素 可 带 有 的 全 部 特性 :， disabled、form、size、multiple、required、autofocus 以 
及 全 部 通用 特性 。 同 时 ，<option> 元 素 可 包含 以 下 特性 : label、selected、value、disabled 以 及 全 部 通 
用 特性 。 


6.3.7 ”文件 选择 框 


如 果 需 要 上 传 文件 ， 则 必须 使 用 “文件 选择 框 ”, 也 被 称 作 “ 文 件 上 传 框 ”。 该 控件 使 用 <input> 
元 素 创建 ， 不 过 这 一 次 赋予 type 特性 的 值 应 为 file: 
<form action="http://www.example.com/imageUpload.aspx" method="post" 
name="fromImageUpload" enctype="multipart/form-data"> 
<input type="file” name="fileUpload" accept="image/+"> 
</form> 


注意 各 
在 使 用 文件 选择 框 时 ，<form> 元 素 的 method 特性 值 必须 是 post。 


本 例 中 使 用 了 以 下 特性 : 

e@ enctype 特性 被 加 入 到 <fomm> 元 素 中 ， 值 为 multipartform-data， 因 此 每 一 个 表单 控件 会 被 单 
独 发 送 至 服务 器 。 在 使 用 文件 选择 框 的 表单 中 要 求 必须 这 么 做 。 

e@ ”accept 特性 被 加 入 到 <input> 元 素 中 ， 以 指定 可 被 选择 上 传 文件 的 MIME 类 型 。 在 本 例 中 ， 
accept 特性 指定 任何 图 片 格式 都 可 被 上 传 , 因为 在 MIME 类 型 “image/” 后 使 用 了 通配符 ( 星 
号 )。 支 持 该 特性 的 浏览 器 有 Opera 11+、Chrome 16+、Firefox 9+ 以 及 IE10+。 

在 图 6-24 中 可 以 看 到 ， 在 Firefox 中 单 击 Browse 按钮 后 ,会 打开 一 个 文件 对 话 框 ， 从 中 可 以 浏 
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览 并 选择 需要 上 传 的 文件 。 注 意 ， 不 同 浏览 器 显示 该 控件 的 方式 也 略 有 不 同 (例如 ，Safari 中 按钮 的 
名 称 是 Choose File 而 非 Browse)。 


图 6-24 文件 选择 框 


type 特性 为 fille 的 <input> 元 素 可 带 有 如 下 特性 : name、 disabled、 form、 accept、 autofocus、 required 
以 及 multiple。 


6.3.8 ”隐藏 控件 


有 些 时 候 需 要 在 页 面 间 传 递 信 息 而 不 希望 被 用 户 看 到 。 为 实现 这 种 功能 , 可 以 使 用 “隐藏 控件 ”。 
尽管 无 法 在 页 面 中 看 到 它们 ， 但 如 果 查 看 页 面 的 源 代码 ， 还 是 可 以 从 代码 中 看 到 它们 的 值 。 因 此 ， 
隐藏 控件 不 要 用 于 不 希望 用 户 看 到 的 敏感 信息 。 

注意 : 

长 的 Web 表单 会 跨越 多 页 ， 因 此 分 割 长 表单 对 用 户 很 有 帮助 。 在 这 种 情况 下 ， 经常 有 必要 将 用 
户 在 第 一 个 表单 (在 一 页 中 ) 中 输入 的 值 传递 到 第 二 页 的 表单 中 ， 然 后 传递 到 另 一 页 。 隐 藏 元 素 是 程 
序 员 能 够 在 页 面 间 传递 值 的 一 种 方式 。 

使 用 type 特性 值 为 hidden 的 <input> 元 素 创建 隐藏 控件 。 例 如 ， 如 下 表单 中 包含 一 个 隐藏 控件 ， 
它 指定 了 用 户 填写 表单 时 所 处 的 网 站 分 区 : 

<form action="http://www.example.com/vote.aspx" method="get" name="fromVote"> 

<input type="hidden" name="hidPageSentFrom" value="home page"> 
<input type="submit' value="Click if this is your favorite page of our site. "> 

</form> 

隐藏 控件 同时 需要 name 和 value 特性 ， 它 将 与 表单 的 其 余部 分 一 同 发 送 至 服务 器 。 

注意 : 

使 用 CSS 的 display 及 visibility 属性 同样 可 以 实现 表单 控件 的 隐藏 。 


6.3.9 新 的 HTML5 表单 元 素 


除 新 的 <input> 类 型 外 , HTML 规范 还 添加 了 一 些 全 新 的 表单 元 素 。 与 许多 新 表单 类 型 的 情况 一 
样 ， 这 些 新 表单 元 素 的 其 中 一 部 分 取代 了 之 前 使 用 大 量 JavaScript、CSS 以 及 标记 创建 的 常用 Web 
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模式 。 
本 节 将 介绍 三 种 最 实用 的 元 素 : <progress>、<meter> 以 及 <datalist>。 此 外 还 有 用 于 数学 或 其 他 
计算 输出 的 <output> 以 及 用 于 加 密 的 <keygen>。 


1. 使 用 新 的 <progress> 元 素 跟踪 任务 完成 进度 


<progress> 元 素 用 于 表现 一 项 任务 的 完成 进度 。 例 如 ， 可 以 使 用 <progress> 跟 踪 文件 的 下 载 量 或 
一 项 调查 问卷 的 完成 百分比 。 除 全 局 特性 外 ，<progress> 还 特别 使 用 如 下 两 个 特性 来 控制 显示 效果 。 

e@ Imax， 指 定 <progress> 元 素 的 最 大 值 。 

e value， 指 定 完成 量 。 

如 果 同时 包含 二 者 ,进度 条 会 按 比例 对 完成 量 进行 着 色 。 如 下 代码 展示 了 <progress> 的 使 用 情况 : 

‘Your progress through this book<br> 

<progress value="6" max="13"> 

可 以 使 用 <progress> 元 素 显示 一 项 任务 的 完成 进度 ， 效 果 如 图 6-25 所 示 。 

如 果 未 指定 值 ， 则 对 该 元 素 的 泻 染 会 从 “确定 的 ”<progress> 变 成 “不 确定 ”<progress>。 对 不 
确定 <progress> 的 泻 染 有 所 不 同 , 不 会 显示 特定 的 完成 百分比 , 取而代之 的 是 一 种 在 可 能 的 值 之 间 不 
断 循环 的 动画 。 为 正确 地 看 到 这 一 效果 ， 应 在 能 够 支持 的 浏览 器 (IE10、Firefox、Chrome、Safari 以 
及 Opera) 中 测试 如 下 代码 : 

Your progress through this book<br> 

<progress max="13"> 


2. 使 用 <meter> 元 素 表示 一 定 范围 内 标量 的 测量 值 


与 <progress> 元 素 类 似 ，<meter> 元 素 可 以 显示 一 个 标尺 。 这 方面 一 个 好 的 例子 可 能 就 是 磁盘 使 
用 量 了 。 下面 的 例子 展示 了 笔者 电子 邮件 收 件 箱 的 当前 使 用 量 。 <meter> 元 素 使 用 min 特性 为 其 添加 
下 限 ( 潜 在 非 零 值 )。 可 以 在 图 6-26 中 看 到 使 用 Google Chrome 泻 染 <meter> 元 素 后 的 效果 : 


<p>You are cuirently using S10MB out of 950MB available. </p> 
<meter min="0" value="510" max="950"> 


Your progress through this book 
J | 


图 6-25 显示 一 项 任务 的 完成 进度 图 6-26 使 用 Google Chrome 渲染 <meter> 元 素 后 的 效果 


<meter> 元 素 包括 如 下 特性 : 

high 指定 “高 ”范围 的 低 端 。 
low 指定 “ 低 ” 范 围 的 高 端 。 
max 设置 进度 元 素 的 最 大 范围 。 
min 设置 进度 元 素 的 最 小 范围 。 
optimum 表示 最 佳 数 值 。 

value 指定 任务 完成 量 。 


You are currentiy using 510MB out of 950MB available 
ww 
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3. 使 用 <input> 元 素 及 新 的 <datalist> 元 素 创建 自动 完成 列表 


使 用 <datalist> 可 以 通过 将 普通 文本 输入 字段 与 供用 户 选择 的 预 生成 选项 列表 相 结 合 ， 得 到 可 扩 
展 性 ， 例 如 Google 之 类 网 站 提供 的 这 种 在 输入 时 给 出 提示 的 功能 。 
通常 这 种 功能 是 由 JavaScript 实现 的 。 使 用 HTML 元 素 实现 该 功能 则 需要 新 的 <input> 特 性 、 列 
表 以 及 <datalist> 元 素 。 将 <datalist> 元 素 与 一 系列 嵌入 的 <option> 元 素 相 结合 ， 这 些 选项 会 直接 产生 
一 个 选项 列表 ， 并 且 会 在 用 户 输入 时 随 之 缩小 范围 。 
<form action="http://Wwww.example.org/info.asp" method="get" name="frmiInfo"> 
了 Please indicate your area of interest:<br> 
<input type="text" name="txtName" value="" size="20" maxlength="20" list="tech"> 
<datalist id="tech"> 
<option value="CSS"> 
‘<option value="HTML"> 
<option value="JavaScript"> 
</datalist> 
</form> 
图 6-27 展示 了 该 组 合 在 Google Chrome 中 的 效果 。 


Please indicate your area of interest 


图 6-27 将 <input> 元 素 与 <datalist> 元 素 组 合 后 得 到 的 效果 


[如 创建 一 个 联系 方式 表单 


前 面 已 经 介绍 了 有 关 HIML 表单 的 基础 知识 ， 下 面 将 以 上 知识 用 于 一 个 联系 方式 表单 。 
例 6-1: 创建 一 个 联系 方式 表单 。 

在 本 例 中 ， 需 要 结合 多 种 表单 控件 ， 为 Example Cafe 创建 一 个 联系 方式 表单 。 

(D 创建 一 个 带 有 框架 的 HTML 文档 ， 然 后 加 入 标题 : 


<!DOCTYPE html> 


<hl>Contact Us</h1l> 

<p>Use the following form to send a message to Example Cafe</p> 
<body> 

<html> 


(2) 表单 会 被 放置 于 一 个 具有 两 列 的 表格 中 ， 提 示 信息 位 于 左 列 ， 而 表单 控件 则 在 右 列 中 对 齐 
排列 。 如 果 不 这 么 做 ， 表 单 控件 在 页 面 中 将 显得 不 对 齐 。 创 建 此 类 效果 的 更 可 取 方 式 是 使 用 CSS。 
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(3) 在 前 两 行 中 ， 使 用 type 特性 值 为 email 的 <input> 元 素 为 访问 者 的 电子 邮件 地 址 添加 一 个 文 
本 输入 控件 。 设 置 该 表单 控件 的 尺寸 以 及 用 户 可 以 输入 的 最 大 字符 数 。 
(4) 在 段落 后 加 入 以 下 表格 ， 告 知人 们 使 用 该 表单 发 送 消息 。 


<table> 
<t> 
<td>Your email</td> 
<td><input type="email" name="txtFrom" id="emailFrom" 
size="20" maxlength="250"></td> 
<> 
(5) 第 一 行 之 后 是 第 二 行 , 其 中 包含 用 户 输入 消息 的 文本 区 域 .文本 区 域 的 尺寸 使 用 rows 及 cols 
特性 进行 设置 。 
<t> 
<td>Message</td> 
<td><textarea name="txtBody" id="emailBody" cols="50" 
ToWs="10"></textarea></td> 
<> 


(6) 在 下 一 行 ， 添 加 一 个 下 拉 选 择 框 ， 供 用 户 选择 咖啡 馆 的 途径 : 


<t> 
<td>How did you hear of us?</td> 
<td> 
<select name="selReferrer"> 
<option value="google">Google</option> 
<option value="ad">Local newspaper ad</option> 
<option value="friend">Friend</option> 
‘<option value="other">Other</option> 
</select> 
<itd> 
<t> 


(7) 在 最 后 一 行 , 添加 一 个 复 选 框 ,以 指明 访问 者 是 否 希 望 注册 电子 邮件 更 新 。 该 控件 使 用 type 
特性 值 为 checkbox 的 <input> 元 素 创建 。 该 复 选 框 默认 应 该 处 在 选中 状态 ， 这 应 该 使 用 checked 特性 
进行 指定 : 

<h> 
<td>Newsletter</td> 
checked> 
Ensure this box is checked if you would like to 
receive email updates</td> 
<> 

</table> 

(8) 添加 提交 按钮 ， 同 样 使 用 <input> 元 素 ， 这 样 访问 者 就 可 以 向 咖啡 馆 发 送 消息 了 。 

<input type="submit" value="Send message"> 


(9) 以 文件 名 6-1.html 保存 文件 并 在 浏览 器 中 打开 ， 效 果 应 该 如 图 6-28 所 示 。 
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- 
© © fieJW/FVHTML5+CSS3/hs/ch06/5 1html ee : 


Contact Us 


Use the following form to send a message to Example Cafe 


Your email 


Message 


How did you hear of us? [Googe ’ 
Newsletter 四 Ensure this box is checked if you would like to receive email updates 
Send message | 


图 6-28 联系 方式 表单 的 效果 


表单 为 用 户 提供 输入 文本 的 接口 。action 特性 指明 服务 器 将 处 理 数据 的 页 面 ， 而 method 特性 则 
指明 数据 发 送 的 方式 ， 使 用 添加 到 URL 后 的 一 系列 查询 参数 (get)， 或 者 作为 HITP 头 部 的 一 部 分 
(posb。 当 提交 表单 时 ， 数 据 会 以 一 系列 “名 称 / 值 ”对 的 形式 发 送 到 服务 器 。 例 如 ， 名 为 selReferrer 
的 <selecf> 下 拉 选 择 框 会 包含 值 google 或 fiend， 并 被 发 送 给 服务 器 。 


使 用 <label> 元 素 为 控件 创建 标签 


如 果 要 为 网 站 创建 一 个 表单 ， 需 要 为 它 提供 好 的 描述 标签 ， 以 使 用 户 能 够 知道 在 哪里 填写 什么 
样 的 数据 。 一 些 表单 控件 ， 如 按钮 ， 本 身 已 经 具有 标签 。 但 对 于 大 多 数 表单 控件 而 言 ， 必 须 为 其 提 
供 标签 。 对 于 没有 标签 的 控件 ， 应 该 使 用 <label> 元 素 。 除 了 告知 用 户 应 该 填写 何 种 信息 之 外 ， 该 元 
素 不 会 对 表单 产生 任何 影响 。 比 如 如 下 示例 : 

<form action="http://www.example.org/login.aspx”" method="post" name="frmLogin"> 

<table> 
<b> 
<td><label for="Uname">User name</label></td> 
<td><input type="text" id="Uname”" name="txtUserName"></td> 


</table> 
</form> 
这 是 一 个 登录 表单 ， 在 本 例 中 可 见 ，<label> 元 素 带 有 名 为 for 的 特性 ， 用 于 指明 该 标签 关联 的 
表单 控件 。for 特性 的 值 与 对 应 表单 控件 的 庆 特性 值 相同 。 例 如 ， 用 于 输入 用 户 名 的 文本 框 表单 控 
件 拥有 值 为 “Uname” 的 这 特性 ， 而 该 文本 框 的 标签 则 有 一 个 for 特性 ， 值 也 为 “Uname”。 这 个 
登录 表单 的 效果 如 图 6-29 所 示 。 
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Fe El Ven ray Eonats To He 僧 


Userrame 


Paszword 


6-29 ”这 个 登录 表单 的 效果 


标签 可 以 放置 于 控件 的 前 方 或 后 方 。 对 于 文本 框 及 下 拉 选 择 框 而 言 ， 通 常 是 将 标签 放置 于 表单 
控件 的 左 侧 或 上 方 ， 对 于 复 选 框 及 单 选 按钮 而 言 ， 标 签 位 于 右 侧 更 易于 与 正确 的 表单 控件 关联 。 
<label> 元 素 的 另 一 种 使 用 方式 是 作为 包含 元 素 。 在 以 这 种 方式 使 用 <label> 元 素 时 ， 不 需要 使 用 
for 特性 , 因为 它 会 自动 应 用 于 位 于 <label> 元 素 内 部 的 表单 元 素 。 这 类 标签 有 时 被 称 为 “ 隐 式 标签 ”， 
例如 : 
<form action="http://www.example.org/login.aspx" method="post" name="frmLogin"> 
<label>Usermame <input type="text" id="Uname" name="txtUserName"></label> 
<label>Password <input type="password" id="Pwd" name="pwdPassword"> 
</label> 
</form> 


这 种 方式 的 缺点 是 ， 无 法 控制 标签 相对 于 表单 控件 的 出 现 位 置 。 


[Ca 使 用 <fieldse 人 及 <legend> 元 素 组 织 表单 结 构 


大 型 表单 需要 将 相关 表单 控件 组 织 到 一 起 。<fieldset> 和 <legend> 就 是 用 来 完成 控件 分 组 的 元 素 。 
e@ ”<fieldset> 元 素 在 表单 控件 组 的 四 周 添加 边框 ， 以 表示 它们 是 关联 元 素 。 
”<legend> 元 素 可 以 为 <fieldset> 元 素 指定 标题 ， 它 将 作为 表单 控件 组 的 标题 显示 。 在 使 用 时 ， 
<legend> 元 素 应 总 是 作为 <fieldsefe> 元 素 的 第 一 个 子 元 素 出 现 。 
图 6-30 展示 了 这 些 元 素 的 实际 效果 。 可 以 看 到 表单 被 分 为 4 个 部 分 : Contact Information、 
Competition Question、 Tiebreaker Question 以 及 Enter competition. 


站 Resnt- 丽 -egend- 二 x 
CD@HmeWFVHTMIscssmac 本 女 日 

Contact Information- 

First name: 

Last name; 

E-mail 

FCompeiton Guedor 

How tallis the Eiffel Tower in Paris France? 


一 
In 25 words orless say why you would like to win $10,.000: 


图 630 使 用 <feldset> 及 <legend> 元 素 组 织 表单 结构 
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本 例 的 代码 如 下 。 可 以 看 到 <fieldset> 元 素 如 何在 表单 控件 组 的 周围 创建 边框 ， 以 及 如 何 使 用 
<legend> 元 素 为 表单 控件 组 添加 标题 。 记 住 ， 在 使 用 <legend> 元 素 时 ， 必 须 将 其 作为 <fieldset> 元 素 
的 第 一 个 子 元 素 。 
<form action="http:/www .example org/competition aspx" method="post" name="fmComp"> 
<fieldset> 
<legend><em>Contact Information</em></legend> 
<label>First name: <input type="text" name="txtFNamenr size="20"> </label><br> 
<label>Last name: <input type="text" name="txtLName" size="20"></label><br> 
<label>E-mail: <input type="text name="txtEmail" size="20"></label><br> 
</fieldset> 
<fieldset> 
How tall is the Eiffel Tower in Paris, France? <br> 
<label><input type="radio" name="radAnswer' value="584">584ft</label><br> 
<label><input type="radio" name="radAnswer' value="784">784ft</label><br> 
<label><input type="radio" name="radAnswer' value="984">984ft</label><br> 
<label><input type="radio" name="radAnswer' value="1184">1184ft</label><br> 
</fieldset> 
<fieldset> 
<legend><em>Tiebreaker Question</em></legend> 
<label>In 25 words or less, say why you would like to win $10,000: 
<textarea name="txtTiebreaker" rows="10" cols="40"></textarea> 
</label> 
</fieldset> 
<fieldset> 
<legend><em>Enter competition</em></legend> 
<input type="submit" value="Enter Competition"> 
</fieldset> 
</form> 


<fieldset> 元 素 可 带 有 如 下 特性 : name、disabled、form 以 及 全 部 通用 特性 。<legend> 元 素 可 带 有 
全 部 通用 特性 。 


[3 焦点 


当 一 个 网 页 中 包含 一 些 链接 或 表单 控件 时 ， 可 以 使 用 Tab 键 在 它们 之 间 移动 , 或 使 用 Shift+Tab 
组 合 键 反 向 在 元 素 间 移 动 。 当 在 元 素 间 移 动 时 ， 浏 览 器 通常 会 为 元 素 (链接 或 表单 控件 ) 添 加 某 种 类 
型 的 边框 或 高 亮 效 果 。 这 被 称 作 焦点 。 
只 有 用 户 可 以 与 之 交互 的 元 素 (如 链接 及 表单 控件 ) 可 以 获得 焦点 。 实 际 上 ， 如 果 用 户 希望 与 某 
个 元 素 交 互 ， 该 元 素 必须 首先 获得 焦点 。 
元 素 可 通过 四 种 方式 获得 
® 元 素 可 以 使 用 定点 设备 (如 鼠标 或 轨迹 球 ) 来 选 定 。 
。 能 够 获得 焦点 的 元 素 可 以 通过 使 用 键盘 ， 经 常 是 通过 使 用 Tab 键 在 此 类 元 素 间 导 航 定位 ， 
或 使 用 ShifttTab 组 合 键 反 向 在 元 素 间 移 动 。 例如 在 一 些 文档 中 , 元 素 可 以 被 赋予 固定 的 “ 标 
签 遍历 顺序 ”， 用 以 指定 用 户 按 下 Tab 键 时 元 素 获 得 焦点 的 顺序 。 
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e 网 页 作者 可 以 指定 当 用 户 使 用 一 种 称 作 “快捷 键 ” 的 键盘 快捷 方式 时 ， 某 元 素 可 以 获得 焦 
点 。 例 如 ， 如 果 网 页 作者 设 定 搜索 框 的 快捷 键 为 S， 在 PC 上 可 能 需要 按 AltrS 组 合 键 ， 在 
Mac 上 则 需要 按 ControltS 组 合 键 ， 之 后 对 应 的 表单 控件 将 获得 焦点 。 

e@ ”如 果 为 某 一 元 素 设置 了 autofocus 特性 ， 该 元 素 在 文档 加 载 后 将 自动 获得 焦点 。 一 个 表单 中 
只 能 有 一 个 元 素 设置 有 autofocus 特性 。 


6.7.1 标签 遍历 顺序 


如 果 想 要 控制 元 素 能 够 获得 焦点 的 顺序 ， 可 以 使 用 tabindex 特性 赋予 元 素 0 到 32767 的 数字 ， 
作为 遍历 顺序 的 一 部 分 。 每 一 次 当 用 户 按 Tab 键 时 ， 焦 点 就 移动 到 下 一 个 拥有 最 大 遍历 顺序 值 的 元 
素 。 同 样 ， 按 ShifttTab 组 合 键 将 以 相反 顺序 移动 焦点 。 当 用 户 遍 历 过 文档 中 所 有 可 以 获得 焦点 的 
元 素 之 后 ， 焦 点 可 能 会 被 赋予 浏览 器 的 其 他 功能 区 域 ， 最 常见 的 情况 是 地 址 栏 。 

为 演示 标签 遍历 顺序 如 何 工作 ， 下 面 的 例子 以 不 同 顺序 赋予 各 复 选 框 焦点 

<form action="http://www.example.com/tabbing.aspx" method="get" 

name="frmTabExample"> 

<input type="checkbox" name="chkNumber' value="1" tabindex="3"> One<br> 
<input type="checkbox" name="chkNumber' value="2" tabindex="7"> Two<br> 
<input type="checkbox" name="chkNumber' value="3" tabindex="4"> Three<br> 
<input type="checkbox" name="chkNumber" value="4" tabindex="1"> Four<br> 
<input type="checkbox" name="chkNumber" value="5" tabindex="9"> Five<br> 
<input type="checkbox" name="chkNumber" value="6" tabindex="6"> Six<br> 
<input type="checkbox" name="chkNumber' value="7" tabindex="10"> Seven<br> 
<input type="checkbox" name="chkNumber' value="8" tabindex="2"> Eight<br> 
<input type="checkbox" name="chkNumber' value="9" tabindex="8"> Nine<br> 
<input type="checkbox" name="chkNumber' value="10" tabindex="5"> Ten<br> 
<input type="submit" value="Submit"> 

</form> 

本 例 中 ， 复 选 框 会 按 以 下 顺序 获得 焦点 : 


4、8、1、3、10、6、2、9、5、7 


图 6-31 展示 了 默认 情况 下 Firefox 浏览 器 如 何 使 用 黄色 边框 突出 获得 焦点 的 表单 控件 ， 其 他 浏 
览 器 使 用 不 同 的 突出 效果 。 如 正 使 用 蓝 色 线条 。 图 6-31 中 的 焦点 元 素 被 放大 显示 ， 以 呈现 更 多 
细节 。 

可 以 获得 焦点 但 未 被 赋予 tabindex 特性 值 的 元 素 会 被 自动 赋予 0。 因 此 ， 当 指定 tabindex 的 值 
时 应 取 1 或 更 大 值 ， 而 不 要 取 0。 

如 果 两 个 元 素 具有 相同 的 tabindex 特性 值 , 它们 将 以 在 文档 中 出 现 的 先后 顺序 进行 排序 。 因此， 
当 tabindex 值 为 1 或 更 大 值 的 元 素 循环 结束 之 后 ， 浏 览 器 会 以 在 页 面 中 出 现 的 顺序 循环 剩余 的 元 素 
(tabindex 值 为 0)。 


注意 : 

如 果 元 素 被 禁用 ， 则 无 法 获得 焦点 ， 也 不 能 参与 标签 顺序 遍历 。 同 时 ， 如 果 使 用 Mac， 则 还 可 
能 需要 在 系统 偏好 里 检查 Keyboard Shortcuts 设 定 。 在 窗口 底部 写 有 Full Keyboard Access 的 地 方 ， 
需要 将 All Controls 选项 选 定 。 
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6.7.2 ”快捷 键 


快捷 键 的 作用 与 键盘 快捷 方式 类 似 。 快 捷 键 是 文档 字符 集中 预计 应 存在 于 用 户 键盘 上 的 单一 字 
符 。 当 该 键 与 另 一 按键 一 同 使 用 时 (例如 在 Windows 中 , 正 是 Alt 键 ，Firefox 是 Alt 与 Shf 键 ; 而 
在 Apple 中 ， 则 是 Control 键 )， 浏 览 器 会 自动 跳 转 到 该 区 域 。 

快捷 键 使 用 accesskey 特性 定义 。 该 特性 的 值 是 希望 用 户 按 下 的 字符 ， 即 键盘 上 的 按键 ,与 之 结 
合 的 其 他 按键 取决 于 操作 系统 及 浏览 器 。 

为 了 解 快捷 键 的 工作 方式 ， 可 参考 6.6 节 中 的 示例 。 现 在 可 以 将 accesskey 特性 添加 到 <legend> 
元 素 中 : 


在 代码 中 添加 额外 的 <br> 元 素 以 展示 快捷 键 被 按 下 时 屏幕 如 何 滚动 到 适当 区 域 。 作 为 对 用 户 可 
以 使 用 快捷 键 的 提示 ， 快 捷 键 字符 信息 也 以 下 划 线 字体 的 形式 添加 到 <legend> 元 素 中 。 图 6-32 展示 
了 更 新 后 的 示例 在 浏览 器 中 的 效果 。 

使 用 快捷 键 的 效果 取决 于 应 用 accesskey 特性 的 元 素 。 在 与 <legend> 元 素 一 同 使 用 时 ， 正 如 前 例 
中 展示 的 ， 如 果 页 面 过 长 , 浏览 器 会 自动 滚动 到 该 部 分 ， 并 将 焦点 赋予 该 区 域 中 的 第 一 个 表单 控件 。 
当 与 表单 控件 一 同 使 用 时 ， 那 些 元 素 将 获得 焦点 。 元 素 一 旦 获得 焦点 ,用 户 就 应 能 够 与 其 进行 交互 ， 
通过 在 文本 控件 中 输入 文本 ， 或 对 其 他 表单 控件 按 Enter 或 Retum 键 。 在 使 用 a 到 z 的 字母 时 ， 以 
大 写 还 是 小 写 形式 指定 快捷 键 无 关 紧要 ， 不 过 严格 来 说 ， 应 该 使 用 小 写 形式 。 


MYWFVHTML5+CSS3nh5kc- 昨 女 日 


Contact Information 
First name: 

Last name: 

E-mail: 


Competition Question 
How tall is the Eiffel Tower in Paris, France? 
入 


784ft 


984 人 ft 
1184ft 


FTiebreaker Question 
In 25 words or less, say why you would like to win 


$10,000: 
Enter competition 
Emier Gormpettion 
图 6-31 复 选 框 获得 焦点 的 效果 图 6-32 使 用 accesskey 特性 定义 快捷 键 
[GO disabled 与 readonly 控件 
对 于 带 有 disabled 和 readonly 特性 的 元 素 : 
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e ”readonly 特性 防止 用 户 更 改 表单 控件 自身 的 值 ,但 仍然 可 以 通过 脚本 进行 修改 。 任 何 readonly 


控件 的 名 称 与 值 仍 将 被 发 送 至 服务 器 。 


e disabled 特性 会 禁用 表单 控件 或 <fieldset> 元 素 中 的 表单 控件 组 ， 从 而 使 用 户 无 法 更 改 。 可 以 


使 用 脚本 重新 激活 控件 ， 但 除非 控件 被 可 


新 激活 ， 否 则 名 称 与 值 不 会 被 发 送 至 服务 器 。 


readonly 特性 在 需要 阻止 访问 者 修改 表单 的 某 一 部 分 时 非常 有 用 。 例 如 ， 将 条 款 和 条 件 放置 于 


文本 区 域 时 ， 该 部 分 不 能 被 修改 。 


disabled 特性 在 用 户 完 成 某 些 操作 前 阻止 用 户 与 特定 控件 交互 时 非常 有 用 。 例 如 ， 可 以 使 用 脚 


本 在 所 有 表单 字段 都 有 一 个 值 之 前 禁用 提交 按钮 


表 6-11 展示 了 可 以 与 readonly 和 disabled 特性 一 同 工 作 的 表单 控件 。 


表 6-11 支持 readonly 与 disabled 特性 的 表单 控件 


表单 控件 readonly disabled 
<textarea> 是 是 
<input type="text"> 是 是 
<input type="checkbox"> 否 是 
<input type="radio"> 否 是 
<input type="submit"> 否 是 
<input type="reset"> 否 是 
<input type="button"> 否 是 
<input type="color"> 否 是 
<input type="date"> 是 是 
<input type="datetime"> 是 是 
<input type="datetime-local"> 是 是 
<input type="email"> 是 是 
<input type="file"> 否 是 
<input type="month"> 是 是 
<input type="number"> 是 是 
<input type="range"> 否 是 
<input type="search"> 是 是 
<input type="tel"> 是 是 
<input type="url"> 是 是 
<input type="week’> 是 是 
<input type="time"> 是 是 
<select> 否 是 
<option> 否 是 
<opteroup> 否 是 
<keygen> 否 是 
<fieldset> 否 是 
<button> 否 是 


表 6-12 指出 了 readonly 与 disabled 特性 的 主要 区 别 。 
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表 6-12 readonly 与 disabled 特性 的 主要 区 别 


特 性 readonly disabled 
可 以 修改 是 ， 通 过 脚本 而 非 用 户 禁用 时 不 可 以 
会 发 送 至 服务 器 禁用 时 不 可 以 
可 以 接收 焦点 否 
包含 于 标签 遍历 顺序 否 


[型 向 服务 器 发 送 表单 数据 


当 浏 览 器 请 求 页 面 以 及 当 服 务 器 向 浏览 器 发 送 回 页 面 时 ， 使 用 的 是 “ 超 文本 传输 协议 ” 
(HyperText Transfer Protocol, HTTP). 

浏览 器 向 服务 器 发 送 表单 数据 能 够 使 用 的 有 两 种 方法 : HTTP get 和 HTTP post。 在 <form> 元 素 
中 可 以 使 用 method 特性 指定 使 用 哪 一 种 方法 。 

如 果 <form> 元 素 未 带 有 method 特性 ， 默 认 将 会 使 用 get 方法 。 如 果 使 用 文件 上 传 表单 控件 ， 则 
必须 选择 post 方法 ， 而 且 必须 将 enctype 特性 的 值 设 置 为 multipart/form-data。 


6.9.1 HTTP get 方法 


在 使 用 HTTP get 方法 向 服务 器 发 送 表 单数 据 时 , 表单 数据 被 附加 到 <form> 元 素 中 由 action 特性 
指定 的 URL 尾部 。 

表单 数据 与 URL 之 间 使 用 问号 分 隔 。 在 问号 ? 之 后 是 各 表单 控件 的 “名 称 / 值 ”对 。 每 个 “名 
称 / 值 ”对 之 间 使 用 与 符号 & 分 隔 。 

例如 ， 以 之 前 引入 密码 表单 控件 时 使 用 的 登录 表单 为 例 ， 如 下 所 示 : 

<form action="http://www.example.com/login.aspx" method="get"> 

Usemame: 

<input type="text" name="txtUsemame" value="" size="20" maxlength="20"><br> 

Password: 

<input type="password" name="pwdPassword" value="" size="20" maxlength="20"> 

<input type="submit"> 

</form> 

在 单 击 提交 按钮 之 后 ， 用 户 名 与 密码 会 被 附加 到 URL http://www.example.com/ login.aspx 之 后 ， 
作为 查询 字符 串 。 结 果 如 下 : 

http://www.example.com/login.aspx?txtUsemame=Bobé&-pwdPassword=LetMeIn 

当 浏览 器 请 求 含有 任何 空格 或 不 安全 字符 的 URL 时， 如/、\、=、& 以 及 (在 URL 中 具有 特殊 
含义 )， 会 以 十 六 进 制 代码 形式 蔡 换 这 些 字 符 。 这 些 操作 由 浏览 器 自动 完成 ， 被 称 作 URL 编码 。 当 
数据 抵达 服务 器 时 ， 服 务 器 通常 会 自动 将 特殊 字符 解码 。 

在 URL 中 传递 表单 数据 的 一 项 优势 是 可 以 收藏 地 址 。 如果 看 一 下 主流 搜索 引擎 (如 Google), 在 
进行 搜索 时 ， 它 们 更 倾向 于 使 用 get 方法 ， 从 而 使 结果 页 面 可 以 被 收藏 。 

但 是 ，get 方法 也 存在 不 足 。 实 际 上 ， 在 发 送 密码 或 信用 卡 细节 等 敏感 信息 时 ， 就 不 应 该 使 用 
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get 方法 。 因 为 这 些 敏感 信息 会 成 为 URL 的 一 部 分 ， 并 且 对 所 有 人 完全 可 见 (还 能 够 被 收藏 )。 
在 以 下 情况 下 不 应 该 使 用 HTTP get 方法 ， 而 应 该 使 用 HTTP post 方法 。 
e@ 处 理 敏感 信息 ， 如 密码 或 信用 卡 细节 。 
e 更 新 数据 源 ， 如 数据 库 或 电子 表格 。 
e ”表单 中 包含 文件 上 传 控件 。 


6.9.2 HTTP post 方 法 


在 使 用 HTTP post 方法 向 服务 器 发 送 来 自 表单 的 数据 时 ， 表 单数 据 将 在 HTTP 头 部 中 透明 地 传 
送 。 尽 管 无 法 看 到 这 些 头 部 信息 ， 但 严格 地 说 ， 它 们 自身 也 是 不 安全 的 。 如 果 发 送信 用 卡 细节 之 类 
的 敏感 信息 ， 数 据 应 该 在 “安全 套 接 字 层 ”(Secure Sockets Layer，SSL) 之 下 发 送 ， 同 时 还 应 被 加 密 。 
如 果 前 面 看 到 的 登录 表单 使 用 post 方法 发 送 ， 则 可 能 在 HITP 头 部 中 有 如 下 表示 

User-agent: MSIE 10 

Content-Type: application/x-www-form-urlencoded 

Content-length: 35 

.other headers go here.. 

txtUserName=Bob&:pwdPassword=LetMeIn 

最 后 一 行 即 表单 数据 .其 格式 与 使 用 get 方 法 时 间 号 之 后 的 数据 完全 相同 。 由 于 同样 会 进行 URL 
编码 ， 因 此 任何 空格 或 不 安全 字符 ， 如 /、\、=、& 以 及 +( 在 URL 中 具有 特殊 含义 )， 都 会 以 十 六 进 
制 代码 形式 蔡 换 ， 与 在 HTTP get 请 求 中 相同 。 

HTMLS 没有 规定 阻止 使 用 post 方法 向 同时 带 有 查询 字符 串 的 页 面 发 送 表单 数据 。 例 如 ， 有 一 
个 页 面 用 于 处 理 用 户 订阅 或 退 订 报 纸 的 请 求 ， 而 你 又 可 能 会 选择 使 用 查询 字符 串 指定 用 户 是 希望 订 
阅 还 是 退 订 。 同 时 ， 你 可 能 希望 使 用 post 方法 发 送 实际 联系 方式 ， 因 为 要 用 这 些 信息 更 新 数据 源 。 
这 种 情况 下 ， 可 能 会 使 用 如 下 <form> 元 素 : 

<form action="http:/www.example comynewsletter asp?action=subscribe" method="post"> 


使 用 HTTP post 方法 的 唯一 问题 是 , 用 户 填 入 表单 的 数据 无 法 被 收藏 一 一 使 用 包含 在 URL 中 时 
同样 的 方式 。 因 此 ， 无 法 像 获 取 收 藏 的 大 多 数 搜索 引擎 生成 的 页 面 那样 ， 使 用 post 方法 获取 使 用 特 
定 表单 数据 生成 的 页 面 。 不 过 这 样 做 对 安全 性 是 有 好 处 的 。 


[GE 创建 更 有 用 的 表单 字段 


下 面 使 用 在 这 几 节 中 学 到 的 可 用 性 工具 增强 之 前 创建 的 表单 。 

例 6-2: 重新 创建 联系 方式 表单 ， 使 用 在 本 章 后 半 部 分 学 到 的 技术 添加 新 的 字段 并 使 其 更 加 
可 用 。 

(1) 打开 在 本 章 稍 早 时 候 创建 的 6-1.html 文件 ， 并 将 其 另存 为 6-2html。 

(2) 应 该 在 描述 表单 控件 作用 的 介绍 信息 周围 放置 <label> 元 素 。 这 里 的 <label> 元 素 应 带 有 for 
特性 ， 其 值 应 该 是 对 应 表单 控件 的 id 特性 值 ， 例 如 : 


<t> 
<td><label for="emailFrom">Your email</label></td> 
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<td><input type="email" name="txtFrom" id="emailFrom”" 
size="20" tabindex="1" maxlength="250"></td> 
<ft> 


(3) 在 表单 开始 处 添加 一 个 新 的 单行 文本 输入 控件 ， 指 明 消息 应 发 送 给 谁 。 该 控件 应 为 只 读 
控件 : 
<t> 
<td><label for="emailTo">To</label></td> 
<td><input type="text" name="txtTo" readonly="readonly”" 
id="emailTo" size="20" value="Example Cafe"></td> 
<h> 


(4) 设置 标签 遍历 顺序 ， 从 而 允许 用 户 输入 电子 邮件 地 址 的 文本 控件 首先 获得 焦点 ， 之 后 是 访 
问 者 输入 消息 的 文本 区 域 : 


<t> 

<td><label for="emailFrom">Your email</label></td> 

<td><input type="email" name="txtFrom" id="emailFrom" size="20" 

tabindex="1" maxlength="250"></td> 

<> 
<b> 

<td><label for="emailBody">Message</label></td> 

<td><textarea name="txtBody" id-"emailBody" cols="50" rows="10" tabindex="2"></textarea></td> 
<> 


(5) 现在 使 用 <fieldset> 元 素 将 表单 分 为 两 部 分 。 为 确保 元 素 正确 获 套 ， 每 个 fieldset 元 素 应 各 自 
具有 一 个 表格 。 表 单 的 第 一 部 分 指明 这 是 关于 用 户 消息 的 信息 。 
<fieldset> 
<legend>Your message:</legend> 
<table> 
<t> 
<td><label for="emailTo">To</labe></td> 
<td><input type="email" name="txtTo" readonly="readonly" id="emailTo" 
size="20" value="Example Cafe"></td> 
<> 
<b> 
<td><label for="emailFrom">Your email</label></td> 
<td><input type="text" name="txtFrom" id="emailFrom" size="20" 
tabindex="1" maxlength="250"></td> 
<> 
<t> 
<td><label for="emailBody">Message</label></td> 
<td><textarea name="txtBody" id="emailBody" cols="50" rows="10" 
tabindex="2"></textarea></td> 
<> 
</table> 
</fieldset> 


(6) 表单 的 第 二 部 分 则 是 关于 公司 的 信息 ( 即 用 户 是 如 何 找到 该 网 站 的 , 以 及 用 户 是 否 希望 加 
入 邮件 列表 ): 
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<fieldset> 
<legend>How you found us:</legend> 
<table> 
<t> 
<td><label for="emailBody">How did you hear of us</label></td> 


<td><label for="newsletterSignup">Newsletter</label></td> 
<td><input type="checkbox" name="chkBody" id="newsletterSignup" checked="checked"> 
Ensure this box is checked if you would like to receive email updates</td> 
< 
<hable> 
</fieldset> 


保存 文件 并 在 浏览 器 中 打开 ， 效 果 如 图 6-33 所 示 。 


Do "EB 
© OMeMF/HTMLSrCSSmS/enos/2nml MI 人 Oi 
Contact Us 
Your message: 
i 
Youremail 
Message 
how yo found ws 
How did you 
hear of us? Loos 
Newsletter Ensure this box is checked if you would like to 
receive email updates 


Sond massage 


图 6-33 改进 后 的 联系 方式 表单 


本 章 小 结 


本 章 全 面 讲述 了 创建 在 线 表单 的 过 程 ， 这 对 很 多 网 站 而 言 都 是 至 关 重 要 的 部 分 。 本 章 讲解 了 表 


单 如 何 存 在 于 <form> 元 素 内 ,而 在 表单 内 部 则 存在 着 一 个 或 多 个 表单 控件 ; 讲解 了 如 何 使 用 <input> 
元 素 创建 多 种 类 型 的 表单 控件 ， 包 括 很 多 不 同类 型 的 单行 文本 输入 控件 ， 还 有 复 选 框 、 单 选 按 钮 、 

文件 选择 框 、 按 钮 以 及 隐藏 控件 ， 讲 解 了 如 何 使 用 <textarea> 元 素 创建 多 行文 本 输入 控件 ， 以 及 如 何 
使 用 <select> 与 <option> 元 素 创建 下 拉 选 择 框 ; 还 讲解 了 新 的 HIMLS 元 素 ， 如 <progress> 和 <meter>， 
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以 及 如 何 简单 地 标记 复杂 UI 组 件 。 

在 使 用 表单 控件 创建 表单 后 ， 需 要 确保 为 每 个 元 素 都 恰当 地 添加 了 标签 ， 从 而 让 用 户 可 以 了 解 
应 该 填写 何 种 信息 ， 或 者 应 该 做 何 种 选择 。 还 可 以 通过 使 用 <fieldset> 与 <legend> 元 素 组 织 大 型 表单 
的 结构 ， 并 且 能 够 使 用 tabindex 与 accesskey 特性 帮助 进行 导航 。 

最 后 ， 本 章 讲解 了 何 时 应 该 使 用 HTTP get 或 post 方法 将 表单 数据 发 送 至 服务 器 。 


思考 和 练习 


1. 在 表单 中 ，method 特性 的 取 值 有 get 和 post， 这 两 种 传送 方式 有 什么 区 别 ? 
2. 描述 required 特性 的 作用 。 
3. 在 input 标记 中 ， 当 type 特性 值 为 什么 时 可 以 定义 电子 邮箱 类 型 的 输入 表单 ? 
4. 创建 投票 或 打分 表单 ， 效 果 如 图 6-34 所 示 。 如 下 <style> 元 素 被 添加 到 文档 的 <head> 元 素 中 ， 
从 而 使 表格 的 每 一 列 具有 相同 的 宽度 ， 并 且 文本 居中 对 齐 。 
<head> 
<title>Voting</title> 
<style type="text/css"> 
tf 
width:100px; 
text-align:center; 
} 
</style> 
</head> 


5. 创建 电子 邮件 反馈 表单 ， 效 果 如 图 6-35 所 示 。 第 一 个 文本 框 是 一 个 只 读 文 本 框 ， 因 此 用 户 
无 法 改动 电子 邮件 接收 者 的 姓名 。 


Reply to ad 


tie ee blnte hem eecelote 地 


Register your opinion i 


How well do you rate the information on this site (where 1 is very 
poor, and 5 is very go0d)? 


© © e Oo © 


于 、 浴 Cc 委 ， 尘 5 
Very Poor Poor Average Good Very Good 
Vote now, 
ee 
图 6-34 ”投票 或 打分 表单 6-35 ”电子 邮件 反馈 表单 


6. 什么 特性 可 以 让 文本 框 用 正则 表达 式 验证 数据 ? 
7. 在 input 标记 中 ，type 特性 值 为 什么 时 可 以 定义 多 选 按钮 输入 类 型 ? 
8. 要 指定 处 理 表单 数据 的 程序 文件 所 在 的 位 置 ， 可 以 使 用 form 标记 的 什么 特性 ? 
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8 骨 


过 去 ，Web 页 面 的 许多 视觉 效果 都 是 由 标记 元 素描 述 的 ， 直 接 把 逻辑 标记 与 物理 标记 混合 在 一 
起 ，HTML 就 是 这 样 的 标记 语言 。 然 而 ， 严 格 的 CYHTML 变 体 则 不 允许 出 现 用 于 描述 外 观 的 元 素 
与 特性 , 标记 语言 只 用 于 描述 结构 .描述 外 观 的 工作 则 交 给 用 层 肝 样式 表 (Cascading Style Sheet, CSS) 
语法 编写 的 样式 表 来 完成 。 标 记 与 样式 之 间 的 职责 划分 为 Web 页 面 的 开发 、 维护 甚至 运行 带 来 了 诸 
多 益处 ， 而 这 种 解决 方案 与 仅仅 使 用 标记 相 比 ， 优 势 巨 大 。 

本 章 简要 介绍 CSS 的 历史 演进 ， 利 用 CSS 2.1 已 经 能 够 做 很 多 事情 ， 而 CSS3 建立 在 这 一 强大 
的 规范 基础 之 上 。 本 章 着 重 介绍 一 些 CSS 基础 知识 和 CSS3 的 新 增 特 性 。 


本 章 的 学 习 目 标 : 

e。 了 解 CSS 演变 历史 

。 掌握 CSS 规则 及 概念 

e 掌握 如 何 应 用 CSS 描述 Web 页 面 的 外 观 
e@ 了 解 CSS3 的 新 增 特性 


CSS 基础 


7.1.1 CSS 演变 历史 


过 去 这 些 年 , W3C 的 层 芝 样式 表 ( 或 称 级 联 样式 表 ) 规 范 已 经 从 CSS1 发 展 到 CSS3, 前 者 于 1996 
年 12 月 17 日 成 为 W3C 推荐 规范 ， 而 后 者 于 2011 年 6 月 7 日 成 为 W3C 推荐 规范 ， 虽 然 很 早 之 前 
就 已 经 开始 起 草 CSS3 规范 。 

虽然 层 营 样式 表 (www.w3.org/Style/CSS/) 可 以 提供 Web 页 面 设计 者 呼吁 多 年 的 东西 : 对 页 面 布 
局 的 更 多 控制 。 然 而 ，CSS 的 构建 却 非常 缓慢 。1996 年 年 末 ，CSS1 作为 第 一 个 标准 出 现 ， 紧 接着 
在 1998 年 CSS2 出 现 。 虽 然 早期 的 浏览 器 ， 例 如 Intemet Explorer 3 和 Netscape 4， 支 持 部 分 CSS 技 
术 ， 但 是 CSS 却 在 获得 普遍 接受 上 遇 到 了 麻烦 。 浏 览 器 的 支持 非常 不 稳定 ， 而 且 一 些 严重 的 错误 ， 
特别 是 早期 ntemet Explorer 中 的 错误 ， 使 得 CSS 的 应 用 成 了 一 件 令 人 泪 丧 的 事情 。 这 里 有 一 些 十 
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分 直观 的 例证 。 一 种 检验 CSS2 一 致 性 的 测试 叫 作 Acid2(www.acidtests.org/)， 它 可 以 测试 CSS1 和 
CSS2 的 许多 功能 。 图 7-1 显示 两 个 浏览 器 (Intemet Explorer 6 和 Firefox 2) 都 没有 通过 测试 。 然 而 ， 
随 着 Intemet Explorer 8 和 Firefox 3 浏览 器 的 发 布 ， 以 及 Opera 和 Safari 等 浏览 器 对 CSS 的 支持 , 主 
要 的 浏览 器 现在 都 通过 了 Acid2 测试 ， 如 图 7-2 所 示 。 现 在 许多 浏览 器 也 通过 了 Acid3 测试 ，CSS 
已 经 稳定 可 行 。 

更 新 版 本 的 浏览 器 可 以 很 好 地 支持 CSS1、CSS2 以 及 CSS3 的 许多 功能 。 然 而 ， 尽 管 支持 CSS 
的 浏览 器 已 经 越 来 越 普遍 ， 但 浏览 器 错误 仍然 存在 。 浏 览 器 依然 不 支持 一 部 分 CSS 规范 ， 浏览 器 开 
发 商 将 所 有 权限 制 引入 到 了 样式 表 中 。 


Heto Wong, 


Hello World! Hello World! 


@@ 但 @ 
ba ba 
Ri ee 
图 7-1 旧版 本 的 浏览 器 没有 通过 Acid2 测试 图 7-2 现代 浏览 器 都 能 通过 Acid2 测试 
7.1.2 CSS 的 版 本 


层 受 样式 表 是 与 Web 一 样 早 的 技术 。CSS1 中 提供 了 许多 功能 ， 以 更 改 边 框 、 边 距 、 背 景 、 颜色 和 
不 同 的 文本 特征 ， 但 是 却 没有 提供 需求 更 大 的 对 象 直接 定位 功能 。CSS3 则 拥有 颜色 处 理 、 设 备 限制 、 
多 国语 言 显示 、 打 印 改进 等 模块 。 

表 7-1 总 结 了 CSS 的 版 本 历史 。 


表 7-1 常用 CSS 版 本 介绍 


CSS1 经 典 的 CSS 版 本 ， 引 入 了 text、list、box、margin、border、color 和 background 特性 。CSS1 最 初 是 在 1996 
年 定义 的 ，Web 浏览 器 几乎 支持 CSS1 中 的 每 一 项 功能 ， 但 是 一 些 使 用 较 少 的 功能 也 的 确 存在 一 些 问题 ， 
例如 white-space、letter-spacing、display 等 。CSS1 中 的 一 些 问题 在 mtemet Explorer 7 浏览 器 之 前 的 旧版 浏 
览 器 中 更 明显 


CSS2 这 个 版 本 以 定位 和 媒体 功能 著称 ， 特 别 是 print 样式 表 功能 。CSS2 的 许多 方面 ， 例 如 音频 样式 表 ， 从 来 没 
有 广泛 实施 过 ， 并 且 在 CSs 规范 后 来 的 版 本 中 取消 了 

CSS2.1 这 个 版 本 是 CSS2 的 修订 版 ， 修 改 了 前 面 版 本 的 一 些 错误 ， 并 且 更 符合 多 数 浏览 器 供应 商 能 够 实现 功能 的 
实际 情况 。 注 意 ， 这 个 版 本 删除 的 许多 CSS2 功能 在 css3 的 模块 中 都 可 以 找到 。 这 个 版 本 是 用 于 研究 和 
使 用 CSS 规范 的 推荐 版 本 
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( 续 表 ) 


CSS 版 本 描述 


CSS3 Css 的 模块 化 规范 。 不 同 的 模块 扩展 、 完 善 了 以 往 Css 版 本 的 各 个 方面 。 例 如 ，CSS3 颜色 模块 解决 了 色 
彩 校正 、 透 明度 等 功能 ，CSS3 字体 模块 增加 了 文字 效果 ， 能 调整 它们 的 显示 ， 甚 至 下 载 自 定义 字体 。 另 
外 ,还 有 一 些 模块 是 新 添加 进来 的 ， 如 渐变 (Transitions) 和 动画 (Animations) 模 块 ， 其 他 已 经 陈旧 的 不 再 使 用 
的 功能 则 被 抛弃 ， 或 者 将 被 抛弃 。 不 管 是 什么 情况 ， 当 谈 到 Css3 时 ， 应 认真 核对 和 测试 对 CSS3 Web 站 
点 的 支持 情况 


1. 专属 CSS 前 缀 


对 于 一 些 Web 开发 人 员 ，CSS 往往 与 标准 和 规范 相关 联 。 事 实 上 ,标记 也 有 专 有 的 功能 。 所 有 
浏览 器 厂商 已 经 推出 了 许多 功能 以 改善 浏览 器 的 性 能 。 其 中 很 多 功能 是 CSS3 规范 最 终 形象 的 预览 ， 
但 目前 它们 还 是 专 有 功能 。 

与 COHTML 不 同 ，CSS 让 浏览 器 厂商 更 方便 地 扩展 规范 ， 例 如 ， 以 连 字符 “- ”或 下 划 线 “_” 
为 起 始 标记 的 新 引入 的 关键 字 和 特性 名 就 被 认为 是 供应 商 特有 的 扩展 。 语 法 是 -vendoridentifier- 
newproperty 或 vendoridentifier newproperty， 虽 然 在 实践 中 ， 带 连 字符 的 名 称 似乎 是 唯一 在 使 用 的 
扩展 。 例 如 ，-moz 用 作 Mozilla 功能 的 前 级 时， 可 以 写作 -moz-border-radius。 常 见 的 前 级 列表 如 表 
7-2 所 示 。 


表 7-2 CSS 扩展 前 组 

说 明 
Intemet Explorer 浏览 器 中 一 些 旧 的 专 有 CSS 功能 没有 
前 缀 
应 用 于 所 有 基于 Gecko 显示 引擎 的 浏览 器 , 例如 Firefox 
Opera 还 支持 实验 性 质 的 音频 样式 表 属 性 的 -xv- 前 级 ， 
例如 -xv-voice-family 
应 用 于 所 有 基于 WebKit 引擎 的 浏览 器 ， 例 如 Apple 的 
Safari 和 Google 的 Chrome 


另外 ， 还 有 其 他 一 些 专 有 的 CSS 前 级， 这 些 前 丝 或 许 遵守 ， 或 许 不 遵守 恰当 的 前 级 机 制 。 例如， 
支持 WAP( 无 线 应 用 协议 ) 的 无 线 电话 可 以 使 用 以 -wap- 为 前 组 的 特性 ， 如 -wap-accesskey。Microsoft 
Office 的 一 些 应 用 可 能 会 使 用 类 似 mso- 的 CSS 规 则 ， 如 mso-header-data。 一 般 来 说 ， 应 该 尽 可 能 避免 
扩展 ， 除 非 外 观 显示 弱化 ， 因 为 扩展 的 兼容 性 和 未 来 浏览 器 或 标准 组 织 对 它们 的 支持 并 不 明确 。 


2. CSS 与 标记 的 关系 


由 于 CSS 依赖 于 标记 ,而 且 在 某 些 情况 下 与 旧版 的 标记 元 素 在 功能 上 有 重 受 , 因此 了 解 这 两 种 
技术 之 间 的 关系 就 非常 重要 。 一 般 来 说 ，COHTML 标记 的 过 渡 版 本 包括 一 些 Web 开发 人 员 可 能 会 
使 用 的 显示 外 观 的 元 素 ， 这 些 元 素 取代 了 CSS 的 作用 ; 而 严格 的 COHTML 版 本 则 删除 了 这 样 的 元 
素 ， 而 完全 依靠 CSS 特性。 例如， 如果 要 将 标签 居中 ， 可 能 会 这 样 使 用 align 特性 ， 如 下 所 示 : 


<h1 align="center">Headline Centered</h1> 
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然而 ， 在 严格 的 标记 中 ， 已 经 不 再 使 用 align 特性 ， 而 是 使 用 CSS。 这 样 ， 标 签 居中 的 工作 可 
以 交 由 一 种 内 联 样式 来 完成 ， 如 下 所 示 : 

<hl style="text-align: center">Headline Centered</h1> 

更 合适 的 方法 是 ， 通 过 class、id 或 元 素 选 择 器 来 应 用 CSS 规则 。 这 里 使 用 class 规则 ， 如 下 
所 示 : 


hl.centered {text-align: center:;} 

这 条 规则 将 包含 centered 的 class 值 应 用 到 标签 ， 如 下 所 示 : 

<hl class="centered">Centered Headline</h1> 

<hl class="fancy centered">Another Centered Headline</h1> 

在 某 些 情况 下 ， 在 使 用 CSS 后 就 不 再 需要 一 些 HTML 元 素 。 例 如 ， 因 为 CSS 规则 经 常 与 div 
或 span 等 普通 元 素 一 同 使 用 ， 所 以 不 再 需要 像 <u>、<sub>、<sup>、<font> 这 样 的 标签 了 。 表 7-3 
详细 介绍 了 严格 的 COHTML 标记 所 弃 用 的 元 素 或 特性 ， 并 显示 了 用 于 蔡 代 它 们 的 CSS 属性 。 


表 7-3 ”常用 的 由 CSS 替代 的 (X)HTML 结构 


XHTML 标签 或 特性 可 替代 的 CSS 属性 > 

‘<center> text-align margin 的 值 ， 例 如 auto 一 般 用 于 使 用 text-align 将 内 容 居中 
margin 显示 

<font> font-family 
font-size 
color 

align 特性 text-align, 在 像 <img> 这 样 的 元 素 中 , CSS 的 float 特性 比 text-align 更 合 
float 适 

<body> 颜 色 特性 color 设置 <body> 的 一 些 特性 ， 如 link、vilink、alink 等 ， 可 以 使 用 
background-color Pseudo-classes:link 、 pseudo-classes:visited 


o-classes:active， 应 该 在 <a> 标 签 中 使 用 
<body>、<table> 和 <td> 的 | background-image 


背景 图 像 特性 

列表 和 列表 项 的 type 和 | list-style-type 单个 Css 属性 不 能 直接 普 代 一 些 功 能 
stat 特性 CSS counters 

<br> 的 clear 特性 clear 

<s> 和 <strike> text-decoration: line-through 

<u> text-decoration: underline 

<blink> text-decoration: blink 没有 浏览 器 支持 


另外 还 有 更 多 的 标签 ， 例 如 <sub>、<sup>、<big>、<small> 等 ， 也 应 尽量 避免 使 用 ， 而 是 要 应 
用 样式 。 但 是 ， 即 使 CSS 减少 了 对 外 观 元 素 的 需要 ， 不 同 的 标记 规范 也 并 没有 弃 用 每 一 个 显示 外 观 
的 元 素 ， 而 是 在 新 的 HTML 5 规范 中 继续 添加 表示 外 观 的 元 素 。 这 意味 着 ， 不 可 能 很 快 实现 一 个 纯 
粹 语义 标记 的 网 络 世界 。 
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7.1.3 ”CSS 规则 
本 节 介 绍 CSS 规则 。 通 过 回顾 CSS 基础 ， 可 以 了 解 在 写 样式 表 时 要 用 到 的 各 个 词汇 。 


1. CSS 语法 


CSS 以 将 规则 与 网 页 中 出 现 的 元 素 相关 联 的 方式 工作 。 这 些 规 则 控制 元 素 中 的 内 容 应 如 何 泻 染 。 
图 7-3 展示 了 一 个 CSS 规则 示例 ， 它 由 两 部 分 组 成 : 
@ “选择 器 ”指明 声明 应 用 于 哪个 或 哪些 元 素 (如 果 应 用 于 多 个 元 素 ， 可 以 使 用 逗号 分 隔 的 多 
元 素 列表 )。 
e@ “声明 ”设置 被 选择 器 引用 的 元 素 应 使 用 的 样式 。 
选择 器 声明 
mm 一 
td {width:36px;} 
ey/ 
属性 ” 值 
图 7-3 一 个 Css 规则 示例 


图 7-3 中 的 规则 将 应 用 于 全 部 <td> 元 素 ， 并 指定 其 宽度 应 为 36 像素 。 

CSS 规则 中 的 声明 同样 分 为 两 部 分 ， 由 冒号 分 隔 : 

e。 “属性 ”是 所 选 元 素 中 希望 影响 的 特性 ， 本 例 中 为 width 属性 。 

。 “ 值 ”是 对 该 属性 的 设 定 ， 本 例 中 指定 表格 单元 的 宽度 应 为 36 像素 。 

这 与 在 HTML 元素 中 设置 特性 并 将 其 用 于 控制 元 素 的 方式 类 似 , 特性 的 值 应 该 作为 该 属性 的 设 
定 。 例 如 ，<td> 元 素 可 以 带 有 width 特性 ， 它 的 值 是 希望 该 表格 单元 具有 的 宽度 : 

<td width="36"></td> 

然而 ， 在 使 用 CSS 时 ， 并 不 是 在 每 一 个 <td> 元 素 实例 中 都 设置 特性 ， 而 是 通过 选择 器 将 该 规则 
应 用 于 文档 中 的 全 部 <td> 元 素 。 

下 面 是 一 个 应 用 于 多 个 不 同 元 素 (<hl>、<h2> 及 <h3>) 的 CSS 规则 示例 。 应 用 该 规则 的 各 元 素 名 
称 间 使 用 逗号 分 隔 。 该 规则 还 为 这 些 元 素 指定 了 多 个 属性 ， 各 “属性 - 值 ”对 之 间 使 用 分 号 分 隔 。 注 
意 全 部 属性 如 何 保存 在 花 括号 中 。 


上 例 中 规则 的 作用 如 下 : 在 选择 器 中 指定 三 个 标题 元 素 (<hl>、<h2> 及 <h3>)， 该 规则 指明 使 用 
这 些 标题 的 地 方 应 该 以 粗 体 样式 的 黑色 Arial 字体 书写 ， 背 景色 为 白色 。 

CSS 规则 会 在 属性 名 称 后 加 一 个 冒号 ， 接 着 是 属性 值 。 每 个 CSS 规则 之 间 由 分 号 隔 开 ， 最 后 一 
个 规则 的 分 号 是 可 选 的 。CSS 基本 规则 如 下 所 示 : 

Selector { 

Property-namel : valuel; … property-nameN : valueN:; 
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上 述 CSS 基本 规则 的 组 成 部 分 如 图 7-4 所 示 。 


属性 名 ] 三 a 
hl {font-size: xx-large;*color: red;} 
| 
T 四 Lm 规则 
选择 器 声明 块 3 


7-4 CSS 基本 规则 的 组 成 
下 面 通过 分 解 一 条 简单 的 CSS 规则 ， 详 细 介 绍 属性 、 值 、 声 明和 声明 块 等 CSS 基础 知识 。 
2. 属性 


在 下 面 的 示例 中 ，border 是 属性 : 


mt{ 
border: 1px; 
} 


属性 是 应 用 于 选择 器 的 样式 。 选 择 器 可 以 是 许多 元 素 ， 例 如 hl、p 或 img 元 素 。 这 里 的 border 
是 属性 ， 它 的 值 是 1px。 


3. 值 


border 属性 的 值 设置 为 1px。 

可 以 在 一 个 声明 中 设置 多 个 值 。 

4. 声明 

将 属性 / 值 对称 为 声明 。 在 上 面 的 示例 中 ， 声 明 就 是 border:1px。 

下 面 再 介绍 一 个 稍微 复杂 的 声明 ， 还 是 使 用 border 属性 ， 可 以 在 一 个 声明 中 设置 多 个 值 ， 如 下 
所 示 : 

hf 

border 1px dotted red; 

在 上 面 的 示例 中 ， 我 们 使 用 多 个 值 一 一 1px、dotted 和 red 一 一 来 创建 更 复杂 的 声明 。 我 们 用 简 

化 符号 来 写 这 些 声 明 ， 也 可 以 跨 多 个 声明 来 写 它们 ， 从 而 创建 一 系列 声明 ， 也 就 是 声明 块 。 


5. 声明 块 
一 条 规则 通常 有 多 个 声明 。 将 前 面 的 示例 从 单行 速记 声明 扩展 为 多 行 的 声明 块 ， 如 下 所 示 : 
mt 

border 1px: 

‘border-style: dotted:; 

border-color red: 


很 明显 ， 简 短 版 本 更 高 效 ， 但 长 版 本 更 容易 维护 。 
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6. 关键 字 


在 前 面 的 示例 中 ， 用 长 度 单元 px 设置 了 边界 宽度 。CSS 规范 定义 了 许多 关键 字 ， 这 些 关键 字 
可 用 来 定义 值 。 前 面 的 示例 显示 了 两 个 关键 字 : border-style 设置 为 dotted，border-color 设置 为 red。 

有 很 多 CSS 关键 字 ， 例 如 不 同 的 颜色 名 (red、green、blue 等 ) 和 边界 样式 (dashed、dotted、 
solid 等 )。 

7. CSS 单位 


再 看 看 下 面 这 个 示例 : 


hf{ 
‘border: 1px: 


} 

这 里 border 属性 的 值 设置 为 lpx。CSS 定义 了 许多 单位 ， 可 用 来 声明 值 ， 包 括 相 对 长 度 单位 、 
绝对 长 度 单位 、CSS 单位 和 颜色 单位 。 

以 颜色 单位 为 例 ， 可 以 使 用 十 六 进 制 代码 ， 例 如 古 F0000， 也 可 以 使 用 关键 字 red 来 定义 颜色 。 
在 下 面 你 将 看 到 ， 还 可 以 用 函数 符号 表示 这 些 单位 。 


8. 函数 符号 


在 CSS3 中 ， 函 数 符号 可 用 来 表示 颜色 、 特 性 和 URI。 
看 看 前 面 使 用 颜色 的 示例 ， 其 中 有 两 个 是 对 等 的 ， 用 十 六 进 制 代码 写 的 十 F0000 和 用 关键 字 写 
的 red。 也 可 以 用 函数 符号 写 这 种 颜色 。 下 面 这 3 个 示例 的 显示 结果 是 相同 的 。 
第 一 个 ， 使 用 十 六 进 制 代码 : 
blockquote { 
background: #FF0000; 
} 


第 二 个 ， 使 用 关键 字 : 


background: red; 
} 
第 三 个 ， 使 用 函数 符号 : 
blockquote { 
background: rgb(255.0.0): 
} 
在 函数 符号 示例 中 ， 使 用 “函数 ”rgb(255.0.0) 来 设置 背景 色 ， 圆 括号 里 的 “参数 ”用 来 定义 这 
个 函数 。 这 与 JavaScript 中 的 函数 类 似 。 
如 果 使 用 伪 代 码 来 写 ， 则 如 下 所 示 : 
blockquote { 
background: function(areument): 
} 
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函数 符号 的 其 他 示例 还 包括 url 函数 ， 如 下 所 示 : 


blockquote { 
background: url(http://www.example.com/background png): 


} 
这 里 函数 是 ul， 圆 括号 里 的 参数 是 背景 图 像 的 位 置 (这 里 是 http://www.example.com/ 
background .png)。 
函数 符号 可 以 提供 很 多 非常 强大 的 功能 ， 比 如 使 用 cale 函数 ，W3C 对 此 进行 了 介绍 ，“ 在 需要 
长 度 值 的 任何 地 方 都 可 以 使 用 cale(<expression>) 函 数 ， 计 算 长 度 的 同时 计算 圆 括号 中 的 表达 
式 …… ”， 如 下 所 示 : 
section { 
float: left; 
margin: lem:; 
border: solid 1px; 
width: cale(100%/3 - 2+lem - 2*1px); 
} 
calc 函数 允许 使 用 数学 表达 式 作为 值 。 可 以 用 它 代 蔡 长 度 、 频 率 、 角 度 、 时 间或 数值 。 而 且 很 
多 浏览 器 也 支持 这 种 特性 。 


9. 选择 器 


选择 器 是 一 种 声明 样式 应 用 于 哪些 元 素 的 方式 ，h1、blockquote、.callout 和 术 ovelyweather 都 是 
选择 器 。 还 有 许多 类 型 的 选择 器 ， 下 面 章节 中 将 详细 介绍 它们 。 


10. 组 合 器 


按照 元 素 出 现时 与 其 他 元 素 (用 选择 器 : 空格 、>、+ 或 ~ 选择 ) 的 相关 度 进行 选择 。 关 于 组 合 器 ， 
下 面 章节 中 将 重点 介绍 不 同类 型 的 组 合 


11. at 规则 


at 规则 以 @ 字 符 开头 ， 例 如 @import、@page、@media 和 @font-face。 下 面 章节 中 将 介绍 这 些 
at 规则 及 其 用 法 。 


12. 厂商 专 有 扩展 名 


厂商 专 有 扩展 名 很 常见 。 它 们 为 特定 厂商 (例如 浏览 器 ) 提 供 专 有 功能 。 它 们 并 不 一 定 表 示 标 准 
里 声明 的 特性 。 


7.1.4 继承 

CSS 的 一 项 强大 特性 是 ， 一 个 属性 被 应 用 于 某 一 元 素 后 ， 该 属性 经 常会 被 子 元 素 (规则 声明 所 在 
的 元 素 中 包含 的 元 素 )“ 继 承 ”。 例 如 ， 上 例 中 在 对 <body> 元 素 进行 font-family 属性 声明 之 后 ， 该 属 
性 将 被 应 用 于 <body> 元 素 内 的 所 有 元 素 。 这 样 做 使 得 免 于 在 标记 网 页 的 每 个 元 素 上 重复 同样 的 
规则 。 
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如 果 另 一 条 规则 更 具体 地 指明 所 应 用 的 元 素 ， 它 会 覆盖 <body> 元 素 或 任何 包含 元 素 中 的 任何 相 
关联 的 属性 。 在 上 例 中 ， 正 如 <body> 元 素 中 的 相关 规则 所 指定 的 ， 大 多 数 文本 都 使 用 Arial 字体 ; 
然而 ， 有 一 部 分 表格 单元 却 使 用 了 Courier 字体 。 这 些 独特 的 表格 单元 拥有 值 为 code 的 class 特性 : 

<td class="code">font-size</td> 

下 面 是 与 这 些 元 素 相关 联 的 规则 : 

tdcode { 

font-family : courier courier-new, serif 
font-weight : bold: 

} 

这 条 规则 优先 于 <body> 元 素 的 关联 规则 ， 因 为 选择 器 更 具体 地 指出 其 应 用 于 哪些 元 素 。 这 种 属 
性 继承 方式 可 以 不 用 为 每 个 元 素 编写 规则 及 所 有 属性 / 值 对 ， 从 而 得 到 更 简洁 的 样式 表 。 


CSS 规则 的 添加 位 置 


将 CSS 规则 放 在 一 个 独立 文件 中 ， 这 种 方式 被 称 为 “外 部 样式 表 ”。 除 此 之 外 ，CSS 规则 还 可 
以 出 现在 HIML 文档 内 的 两 个 位 置 : 
。 位 于 一 个 <style> 元 素 内 ， 该 元 素 位 于 文档 的 <head> 元 素 中 。 
。 位 于 一 个 可 以 带 有 style 特性 的 元 素 中 ， 作 为 style 特性 的 值 。 
当 CSS 规则 位 于 文档 头 部 的 <style> 元 素 内 时 ， 则 被 称 为 “内 部 样式 表 ”。 示 例如 下 : 
<head> 
<title>Intemal Style sheet</title> 
<style type="text/css"> 
body { 
color : #000000; 
background-color : #ffffff 
font-family : arial, verdana, sans-serif 
1 
hl{ 
font-size : 18pt: 
} 
p{ 
font-size : 12pt; 
} 
</style> 
</head> 


当 style 特性 被 用 于 HTML 元 素 时 ， 则 被 称 为 “内 联 样式 规则 ”， 例 如 : 

<td style="font-family:courier: padding:5px: border-style:solid: 

border-width:1px; border-color:#000000: "> 

从 上 例 中 可 以 看 到 , CSS 属性 被 作为 值 添加 到 style 特性 中 。 这 种 情况 下 仍然 需要 使 用 冒号 分 隔 
每 一 个 属性 与 对 应 值 ， 并 使 用 分 号 分 隔 每 一 组 “属性 / 值 ”对 。 然 而 ， 这 里 不 需要 任何 选择 器 (因为 
样式 会 自动 应 用 于 带 有 style 特性 的 元 素 )， 而 且 也 没有 花 括号 。 
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总 体 上 应 该 避免 使 用 内 联 样式 规则 以 及 内 部 样式 表 ， 而 应 该 积极 使 用 外 部 样式 表 。 虽 然 有 些 情 
况 下 前 面 两 者 很 有 用 ， 但 外 部 样式 表 的 可 维护 性 要 好 很 多 。 

外 部 样式 表 使 用 <link> 元 素 进 行 加 载 。 因此 在 继续 介绍 CSS 之 前 , 先 来 稍微 深入 了 解 一 下 <link> 
元 素 以 及 相关 的 特性 。 


7.2.1 用 <link> 元 素 链 入 外 部 样式 表 

<link> 元 素 用 于 在 网 页 中 描述 两 个 文档 之 间 的 关系 。 例 如 ， 可 以 在 HIML 页 面 中 用 它 指定 应 该 
用 于 设置 页 面 风 格 的 样式 表 。<link> 元 素 在 HTML 页 面 中 还 起 到 其 他 的 作用 ， 例 如 ， 为 对 应 页 面 指 
定 RSS 订阅 。 

这 种 链接 类 型 与 <a> 元 素 不 同 ， 因 为 两 个 文档 是 自动 关联 的 ， 用 户 不 必 通 过 单 击 任何 东西 激活 
链接 。 

<link> 元 素 永远 是 空 元 素 ， 而 且 当 与 样式 表 一 同 使 用 时 ， 必 须 带 有 两 个 特性 : rel 和 href。 在 下 
面 的 示例 中 ，<link> 元 素 在 HTML 页 面 中 被 用 于 指定 应 该 使 用 一 个 名 为 nterface css 的 CSS 文件 设 
置 页 面 风格 ， 并 且 CSS 文件 位 于 一 个 名 为 CSS 的 子 目录 中 。 

<link rel="stylesheet” href="./CSS/interface.css"> 

除 核 心 特性 外 ，<link> 元 素 还 可 以 带 有 以 下 特性 : 

charset href hreflang media rel type sizes target 

下 面 将 对 其 中 较为 重要 的 特性 进行 讨论 。 


1. rel 特性 


rel 特性 是 一 个 必需 特性 ， 用 于 指定 包含 链接 的 文档 与 链接 指向 文档 问 的 关系 。 用 于 链接 样式 表 
时 的 键 值 是 “stylesheet”: 

rel="stylesheet" 

该 特性 的 其 他 可 能 取 值 已 在 3.2.2 节 “ 链 接 与 导航 ”中 介绍 过 。 

2. href 特性 


href 特性 用 于 指定 链接 指向 文档 的 URL: 

href=". /stylesheets/interface.css" 

此 特性 的 值 可 以 是 绝对 或 相对 URL( 在 3.2.2 节 “ 链 接 与 导航 ”中 介绍 过 )， 但 通常 是 相对 URL， 
因为 样式 表 是 网 站 的 一 部 分 。 

3. media 特性 


media 特性 用 于 指定 应 该 用 于 文档 的 输出 设备 : 

media="screen" 

尽管 网 页 中 并 不 总 是 使 用 该 特性 ， 但 它 却 非常 重要 ， 因 为 人 们 会 使 用 不 同 的 设备 以 不 同 的 方式 
访问 互联 网 。 表 7-4 展示 了 该 特性 可 能 的 取 值 。 
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表 7-4 media 特性 可 能 的 取 值 


值 使 用 设备 
screen 无 分 页 计算 机 屏幕 (如 台式 计算 机 或 笔记 本 电脑) 
ty 等 宽 字 符 网 格 媒体 ， 如 电 传 打 字 机 、 终 端 或 显示 能 力 有 限 的 便携 设备 
tv 低 分 辩 率 、 彩 色 屏 幕 ， 以 及 向 下 滚动 页 面 能 力 受 限 的 电视 设备 
print 打印 文档 ， 有 了 时 也 称 为 “分 页 媒体 ”( 包 括 打印 预览 模式 中 显示 于 屏幕 上 的 文档 ) 
projection 投影 仪 
handheld 手持 设备 ， 屏 幕 经 常 较 小 ， 依 赖 于 点 阵 图 形 化， 并 且 带 宽 有 限 
braille 盲文 触觉 反馈 设备 
embossed 盲文 分 页 打印 机 
speech 语音 合成 器 
all 适用 于 所 有 设备 


7.2.2 用 <style> 元 素 导 入 外 部 样式 表 


<style> 元 素 位 于 <head> 元 素 内 ,用 于 在 网 页 内 包含 样式 表 规则 ， 而 非 链 接 某 个 外 部 文档 。 有 时， 
还 被 用 于 需要 在 单一 页 面 中 包含 某 些 额 外 规则 ， 而 且 这 些 规则 不 必 应 用 于 网 站 内 共享 同一 样式 表 的 
全 部 其 他 页 面 的 情况 。 

例如 ， 使 用 <link> 元 素 在 HIML 文档 中 附加 一 个 样式 表 ， 同 时 使 用 <style> 元 素 为 <h1> 元 素 添加 
额外 的 规则 : 

<head> 

<title> 
<link rel="stylesheet" href=". /styles/mySite.css"> 
<style type="text/css"> 
hf 
color:-#FcOOf000; 
} 
</style> 

</head> 

在 使 用 <style> 元 素 时 ， 尽 管 并 非 强 制 ， 但 应 该 永远 带 有 type 特性 。 除 全 部 通用 特性 外 ， 该 元 素 
还 可 以 带 有 的 特性 为 : 

type media scoped 


7.2.3 ”使 用 外 部 样式 表 


在 使 用 外 部 样式 表 时 , 需要 先 定义 外 部 样式 表 文件 。 一 个 外 部 样式 表 文件 可 以 应 用 于 多 个 页 面 。 
当 改 变 这 个 样式 表 文 件 时 ， 所 有 引用 该 样式 表 文 件 的 页 面 的 样式 都 随 之 改变 ， 不 仅 可 以 减少 要 重复 
的 工作 量 ， 而 且 有 利于 以 后 修改 、 编 辑 ， 浏 览 时 也 避免 了 重复 下 载 代码 。 样 式 表 文件 可 以 用 任何 文 
本 编辑 器 编辑 ， 扩 展 名 为 .css， 内 容 是 定义 的 样式 表 ， 不 包含 HTML 标记 。 
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1. 导入 外 部 样式 表 


导入 外 部 样式 表 是 指 在 HTML 文件 头 部 的 <style> 元 素 里 导入 外 部 样式 表 , 导入 外 部 样式 表 采 用 
import 方式 。 导 入 外 部 样式 表 和 链 入 样式 表 相 似 ， 但 导入 外 部 样式 表 的 样式 实质 上 相当 于 存放 在 网 
页 内 部 。 

例 7-1: 导入 外 部 样式 表 ， 效 果 如 图 7-5 所 示 。 

本 例 首先 定义 好 外 部 样式 表 文 件 style.css， 然 后 在 HTML 文件 7-1.html 的 <style> 元 素 里 采用 
import 方式 导入 外 部 样式 表 文件 style.css。 


”图 7-5 使 用 导入 样式 的 效果 


CSS 文件 代码 如 下 : 


hlf 
text-align:center: 局 设置 对 齐 方式 为 居中 */ 


line-height:1.5; 人 # 设置 行 高 */ 
font-size:14px: 上 设置 字体 大 小 */ 


width:120px; * 设置 宽度 */ 


<hl> 惠 崇 春 江 晚 景 <h1> 


i 

"往外 桃花 三 两 枝 ， 春 江水 暖 鸭 先知 。 莱 蒿 满 地 芦 芽 短 ， 正 是 河豚 欲 上 时 。"<br /> 

惠 崇 春江 晚 景 是 元 丰 八 年 (1085) 苏 轼 在 逗留 江阴 期 间 ， 为 惠 崇 所 绘 的 鸭 戏 图 而 作 的 题 画 诗 。 苏 轼 的 题 画 诗 内 容 丰 富 ， 取 
村 广泛， 遍及 人 物 、 山 水 、 鸟 兽 、 花 卉 、 木 石 及 宗教 故事 等 众多 方面 。 这 些 作品 鲜明 地 体现 了 苏轼 雄健 豪放 、 清 新 明快 的 艺 
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术 风格 ， 显 示 了 苏轼 灵活 自如 地 驾驭 诗 画 艺术 规律 的 高 超 才能 。 而 这 首 《 惠 崇 < 春 江 晚 景 >》 历 来 被 看 作 苏轼 题 画 诗 的 代表 作 。 

3 

<img src="images/blossom2 jpg" /> 

<img src="images/blossom3jpg" 户 

<img sre—"images/blossom4.jpe” /> 

<img sre="images/blossom6 jpg” /> 

<img sre="images/blossom7.jpe" 亡 

<img src="images/blossomgjpg" 户 

<body> 

<html> 


2. 链 入 外 部 样式 表 


链 入 外 部 样式 表 是 指 把 样式 保存 为 一 个 外 部 样式 表 文 件 ， 然 后 在 页 面 中 用 <link> 元 素 链接 到 这 
个 样式 表 文件 ，<link> 元 素 放 在 页 面 的 <head> 元 素 内 。 
例 7-2: 链 入 外 部 样式 表 ， 效 果 如 图 7-6 所 示 。 


图 7-6 使 用 链 入 样式 的 效果 


本 例 仍 使 用 上 例 的 外 部 样式 表 文 件 style.css。 在 HTML 文件 7-2.html 的 <head> 元 素 内 通过 <link> 
元 素来 调用 外 部 的 style.css 文件 。 
HTML 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 入 样式 表 </title> 

<link href="style.css" rel="stylesheet" type="textcss”" /> 

</head> 

<body> 

<hl> 题 都 城南 庄 <hl> 

<p> 

"去 年 今日 此 门 中 ， 人 面 桃花 相映 红 。 人 面 不 知 何 处 去 ， 桃 花 依 旧 笑 春风 。"<br /> 

此 诗 的 创作 时 间 ， 史 籍 没 有 明确 记载 。 而 唐人 孟 荣 《本 事 诗 》 和 宋代 《太平 广 记 》 则 记载 了 此 诗 “ 本 事 ”， 崔 护 到 长 安 
参加 进士 考试 落 第 后 ， 在 长 安南 郊 偶遇 一 美丽 少女 ， 次 年 清明 节 重 访 此 女 不 遇 ， 于 是 题写 此 诗 。 这 段 记 载 颇具 传奇 小 说 色彩 ， 
其 真实 性 难以 得 到 其 他 史料 的 印证 。 

> 

<p> 
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全 诗 四 句 ， 这 四 句 诗 包含 着 一 前 一 后 两 个 场景 相同 、 相 互 映 照 的 场面 。 第 一 个 场面 : 寻 春 遇 艳 一 一 “去 年 今日 此 门 中 ，, 
人 面 桃花 相映 红 。” 诗 人 抓 住 了 “ 寻 春 遇 艳 ”整个 过 程 中 最 美丽 动人 的 一 幕 。“ 人 面 桃花 相映 红 ”， 不 仅 为 艳 若 桃花 的 “人 
面 ”设置 了 美好 的 背景 ， 衬 出 了 少女 光彩 照 人 的 面 影 ， 而 且 含蓄 地 表现 出 诗人 目 注 神 驰 、 情 摇 意 夺 的 情 状 ， 和 双方 脉 脉 含情 、 
未 通 言 语 的 情景 。 第 二 个 场面 : 重 寻 不 遇 。 还 是 春光 烂漫 、 百 花 吐 艳 的 季节 ， 还 是 花木 扶 疏 、 桃 树 掩映 的 门户 ， 然 而 ， 使 这 
一 切 都 增光 添彩 的 “人 面 ” 却 不 知 何 处 去 ， 只 剩 下 门 前 一 树 桃花 仍旧 在 春风 中 凝 情 含笑 。 

<p> 

<img sre="images/blossom1 jpg" 户 

<img sre="images/blossom? jpg" 亡 

<img sre="images/blossom3.jpg" 记 

<img sre="images/blossom4 jpg” /> 

<img sre="images/blossom5 jpg” /> 

<img sre="images/blossom6 jpg" /> 

<body> 

</html> 


上 面 两 个 实例 都 使 用 了 外 部 样式 表 文 件 style.css， 当 对 style css 做 出 改变 时 ， 两 者 均 受 影响 。 例 
如 ， 在 style.css 中 增加 一 条 设置 网 页 背景 色 的 样式 ， 则 两 个 网 页 的 背景 色 均 变 为 #dcb864， 浏 览 效 果 
如 图 7-7 所 示 。 


body{ 
background-color-#dcb864; 


六 


图 7-7 修改 外 部 样式 表 文 件 后 的 页 面 浏览 效果 


7.2.4 外 部 样式 表 的 优势 


如 果 有 两 个 或 更 多 个 文档 需要 使 用 样式 表 ， 则 应 该 使 用 外 部 样式 表 。 有 以 下 几 点 理由 : 

。 能 够 免 于 在 每 一 页 中 重复 相同 的 样式 规则 。 

。 能 够 仅 通过 修改 一 个 样式 表 完成 对 多 个 页 面 外 观 的 修改 ， 而 不 必修 改 每 个 页 面 。 

®” 当 网 站 访问 者 从 网 站 中 第 一 个 使 用 外 部 样式 表 的 页 面 下 载 该 文件 后 ， 后 续 页 面 加 载 速 度 会 
更 快 。 这 同样 减轻 了 服务 器 的 压力 ， 因 为 向 外 发 送 的 页 面 更 小 了 。 

e 样式 表 可 以 作为 样式 模板 ， 为 不 同 作者 实现 相同 的 文档 风格 。 

。 因为 网 页 不 包含 样式 规则 ， 所 以 不 同 的 样式 表 可 以 与 相同 的 文档 关联 。 因 此 ， 可 以 使 用 相 
同 的 HTML 文档 ， 然 后 使 用 一 种 样式 表 对 应 使 用 台式 计算 机 的 浏览 者 ， 而 使 用 另 一 种 样式 
表 对 应 使 用 手持 设备 的 用 户 ， 等 等 。 可 以 使 用 同样 的 文档 与 不 同 的 样式 表 应 对 不 同 的 访问 
需求 。 


e 样式 表 可 以 导入 并 使 用 来 自 其 他 样式 表 的 样式 , 从 而 允许 模块 化 开发 并 获得 良好 的 可 重用 性 。 
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e ”如 果 移 除 样式 表 ， 可 以 使 网 站 对 于 视觉 障碍 者 具有 更 好 的 易 访问 性 ， 因 为 不 再 控制 字体 与 


配色 方案 。 


CSS 属性 


使 用 CSS 设置 网 页 样式 需要 创建 规则 ， 而 这 些 规则 包含 两 部 分 : 一 部 分 是 选择 器 ， 用 于 指定 规 
则 应 用 的 元 素 ， 另 一 部 分 是 属性 ， 用 于 控制 这 些 元 素 的 呈现 。 因 此 ， 如 果 页 面 中 有 一 部 分 需要 设置 
某 种 颜色 或 尺寸 ， 那 么 需要 使 用 正确 的 选择 器 瞄准 页 面 中 的 这 部 分 ， 并 使 用 正确 的 属性 来 相应 改变 
其 外 观 。 属 性 都 按照 相关 功能 进行 了 分 组 ， 如 表 7-5 所 示 。 
表 7-5 主要 的 CSS 属性 


届 性 | 指 述 | 性 | 描 述 
字体 边框 
font 字体 复合 属性 border 设置 所 有 的 边框 属性 
font-famil 规定 文本 的 字体 系列 border-color 设置 边框 的 颜色 
font-size 规定 文本 的 字体 尺寸 border-style 设置 边框 的 线 型 
font-style 规定 文本 的 字体 样式 border-width 设置 边框 的 宽度 
font-variant 规定 是 否 以 小 型 大 写字 母 的 字体 | border-bottom 设置 下 边框 样式 

显示 文本 
font-weight 规定 字体 的 粗细 border-bottom-color 设置 下 边框 的 颜色 
文本 border-botton 设置 下 边框 的 线 型 
color 设置 文本 的 颜色 border-bottom-width 设置 下 边框 的 宽度 
direction 控制 文本 的 方向 border-left 设置 左边 框 样式 
letter-spacing 设置 字符 间距 border-left-color 设置 左边 框 的 颜色 
text-aligr 规定 文本 水 平 对 齐 方式 borderleft 设置 左边 框 的 线 型 
text-decoration 规定 添加 到 文本 的 装饰 效果 border-left-width 设置 左边 框 的 宽度 
text-indent 规定 文本 块 首 行 的 缩 进 border-righ 设置 右边 框 样式 
text-shadow 规定 添加 到 文本 的 阴影 效果 border-right-color 设置 右边 框 的 颜色 
text-transform 控制 文本 的 大 小 写 border-right-style 设置 右边 框 的 线 型 
unicode-bidi 覆盖 文本 方向 border-right-width 设置 右边 框 的 宽度 
white-space 规定 文本 空白 等 处 理 方式 border-top 设置 上 边框 样式 
word-spacing 设置 单词 间距 border-top-color 设置 上 边框 的 颜色 
背景 border-top-style 设置 上 边框 的 线 型 
background 背景 复合 属性 border-top-width 设置 上 边框 的 宽度 
background-color 设置 元 素 的 背景 颜色 外 边 距 
background-attachment 设置 背景 图 像 是 否 固定 或 者 随 着 | margin 设置 所 有 外 边 距 属性 
页 面 的 其 余部 分 滚动 

background-image 设置 元 素 的 背景 图 像 margin-bottom 设置 元 素 的 下 外 边 距 
background-position 设置 背景 图 像 的 开始 位 置 margin-left 设置 元 素 的 左 外 边 距 
background-repeat 设置 是 否 及 如 何 重复 背景 图 像 margin-right 设置 元 素 的 右 外 边 距 
background-clip 规定 背景 的 绘制 区 域 margin-top 设置 元 素 的 上 外 边 距 
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( 续 表 ) 
属 性 | 描述 属 性 描 述 
内 边 距 outline-style 设置 轮廓 的 样式 
padding 设置 所 有 内 边 距 属性 outline-width 设置 轮廓 的 宽度 
padding-bottom 设置 元 素 的 下 内 边 距 表格 
padding-left 设置 元 素 的 左 内 边 距 border-collapse 规定 是 否 合并 表格 边框 
padding-right 设置 元 素 的 右 内 边 距 border-spacing 规定 相 邻 单元 格 边框 间距 离 
padding-top 设置 元 素 的 上 内 边 距 empty-cells 规定 是 否 显示 表格 中 的 空 单 
元 格 的 边框 和 背景 
尺寸 caption-side 规定 表格 标题 的 位 置 
height 设置 元 素 的 高 度 table-layout 设置 用 于 表格 的 布局 算法 
line-height 设置 文本 的 行 间距 列表 与 标记 
max-height 设置 元 素 的 最 大 高 度 list-style 设置 所 有 的 列表 属性 
max-width 设置 元 素 的 最 大 宽度 list-style-image 将 图 像 设 置 为 列表 项 标记 
min-height 设置 元 素 的 最 小 高 度 list-style-position 设置 列表 项 标记 的 放置 位 置 
min-width 设置 元 素 的 最 小 宽度 list-style-typ 设置 列表 项 标记 的 类 型 
width 设置 元 素 的 宽度 marker-offset 
定位 生成 内 容 
bottom 设置 定位 元 素 下 外 边 距 边 界 与 其 content 在 文档 中 插入 生成 内 容 
包含 块 下 边界 之 间 的 偏 移 
Left 设置 定位 元 素 左 外 边 距 边 界 与 其 counter-increment 控制 Css 计数 器 的 值 
包含 块 左边 界 之 间 的 偏 移 
top 设置 定位 元 素 上 外 边 距 边 界 与 其 | counter-reset 重 置 或 设置 Css 计数 器 的 值 
包含 块 上 边界 之 间 的 偏 移 
overflow 规定 内 容 超 过 元 素 定义 区 域 时 元 | quotes 定义 使 用 霸 套 引用 的 引号 标 
素 的 行为 记 样式 
clip 剪裁 绝对 定位 元 素 分 类 
Tight 设置 定位 元 素 右 外 边 距 边界 与 其 | clear 规定 元 素 的 哪 一 侧 不 允许 其 
包含 块 右 边界 之 间 的 偏 移 他 浮动 元 素 
vertical-align 设置 文本 和 图 像 相 对 于 基准 线 的 | cursor 规定 鼠标 经 过 元 素 的 范围 时 
垂直 对 齐 方式 所 显示 光标 的 类 型 
z-index, 设置 元 素 的 堆 登 顺序 display 规定 元 素 表现 出 来 的 类 型 
轮廓 float 规定 元 素 的 浮动 方式 
outline 设置 轮廓 属性 Position 规定 元 素 的 定位 类 型 
outline-color 设置 轮廓 的 颜色 visibilit 规定 元 素 是 否 可 见 


CSS3 新 增 特 性 


7.4.1 CSS3 模块 化 方式 


CSS 演进 的 一 个 
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随 着 CSS 普及 率 不 断 上 升 , 对 添加 规范 的 呼声 也 在 增加 。 除了 将 许多 更 新 加 入 庞大 的 规范 之 外 ， 
更 容易 和 更 有 效 的 方法 是 更 新 规范 里 的 单个 条 目 。 模 块 就 能 以 更 及 时 、 更 简便 的 方式 更 新 CSS， 从 


而 能 够 更 灵活 、 


更 及 时 地 演进 整个 规范 。 


CSS3 最 重要 的 几 个 模块 包括 : 


. 
. 
. 
. 
. 
. 
. 
表 


模 据 | 梢 迷 


更 强大 的 CSS 选择 器 


色 可 选 方案 


背景 及 边框 模块 

多 列 布局 模块 

媒体 查询 

使 用 @font-face 指令 自 定义 字体 
变形 、 动 画 以 及 过 渡 的 高 级 CSS 操控 
7-6 总 结 了 CSS3 规范 的 模块 和 相应 的 简要 描述 ， 从 而 向 大 家 提供 CSS3 概览 。 


表 7-6 不 同 的 CSS3 模块 及 描述 


URL 


2D Transforms 提供 二 维 内 容 处 理 操作 ， 例 如 让 对 象 旋转 、 缩 放 、 偏 余 Www.w3.0rg/TR/css3-2d-transforms 

3D Transforms, 将 二 维 的 变形 扩展 为 三 维 空间 的 元 素 处 理 Www.w3.0rg/TR/css3-3d-transforms 

动画 引入 修改 Css 属性 值 的 能 力 ， 例 如 位 置 、 颜 色 ， 从 而 创建 动画 | www.w3.org/TR/css3-animations 
布局 

背景 和 边框 引入 多 种 背景 ， 不 同 的 定位 和 大 小 变化 的 背景 属性 。 人 允许 一 些 | www.w3.org/TR/css3-background 
新 的 边框 属性 使 用 图 像 、 阴 影 等 对 象形 成 更 丰富 的 边框 样式 

行为 扩展 定义 可 以 附加 到 页 面 元 素 上 的 组 件 ， 增 强 其 功能 WwWW.W3.oTR/TRJbe 

Box 模块 定义 标准 框 ， 包 括 浮动 、 边 距 、 滋 出 和 内 边 距 Www.w3.0rg/TR/css3-box, 

颜色 定义 CSS 中 支持 的 颜色 单元 ， 以 及 一 些 颜色 属性 ， 例 如 color | www.w3.org/TR/css3-color 
和 opacity。CSS2 对 此 进行 了 大 多 数 的 定义 ,包括 一 些 新 的 内 容 ， 
例如 currentColor 关键 字 

字体 定义 标准 的 字体 属性 ， 但 是 引入 新 的 字体 装饰 功能 ， 例 如 | www.w3.org/TR/css3-fonts 
font-effect、font-smooth 和 fontremphasize， 目 前 浏览 器 还 不 支持 
这 些 属性 

为 页 面 媒体 生成 | 定义 对 打印 输出 的 内 容 的 管理 ， 包 括 剪 切 标记 指示 、 处 理 页 眉 | www.w3.org/TR/css3-gcpm 

的 内 容 页 脚 等 

生成 和 蔡 换 内 容 | 定义 对 生成 内 容 的 管理 ， 包 括 插入 内 容 、 页 码 、 脚 注 等 Www.w3.0rg/TR/css3-content 

网 格 定位 定义 使 用 标准 Css 大 小 和 定位 属性 的 基于 网 格 布局 的 使 用 方法 | www.w3.org/TR/css3-grid 

超 链接 显示 定义 链接 的 外 观 效果 Www.w3.org/TR/css3-hyperlinks 

行 布局 定义 行 格式 属性 ， 例 如 垂直 行 对 齐 、 行 高 和 首 行 首 字 视 觉 效 果 | www.w3.org/TR/css3-linebox 

列表 定义 列表 标题 ， 包 括 标记 样式 和 一 些 计数 样式 Www.w3.org/TR/css3-lists 

滚动 文字 定义 属性 创建 动画 内 容 ， 使 用 “marquee” 的 效果 与 非 标准 的 | www.w3.org/TR/css3-marquee 
HTML 同名 标签 <marquee> 相 似 

媒体 查询 定义 Css 语法 基于 媒体 或 设备 特征 应 用 不 同 的 样式 规则 ,例如 | www.w3.org/TR/css3-mediaqueries 
宽度 、 支 持 颜 色 等 ， 避 免 使 用 JavaScript 重复 应 用 样式 

多 列 布局 定义 如 何 将 文本 放置 到 多 列 中 Www.w3.org/TR/css3-multicol 
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( 续 表 ) 
模块 描述 URL 

名 称 空间 定义 语法 以 允许 同一 文档 中 ， 为 实现 相同 样式 却 属于 不 同 标记 | www.w3.org/TR/css3-namespace 
语言 的 元 素 的 模糊 性 

页 面 媒体 定义 页 码 是 如 何 实现 的 ， 特 别 是 在 打印 输出 中 Www.w3.0rg/TR/css3-page 

显示 级 别 根据 不 同 的 情况 ， 定 义 在 不 同方 式 下 应 用 到 样式 元 素 的 显示 级 | www.w3.org/TR/css3-preslev 
别 

Ruby 定义 CSS 处 理 Ruby 文本 ， 这 种 文本 用 于 为 东亚 地 区 语言 提供 | www.w3.org/TR/css3-muby 
音标 或 者 蔡 代 读音 内 容 

选择 器 为 标准 的 CSS1 和 CSS2 定义 不 同 的 选择 器 , 并 引入 复杂 的 tree- | www.w3.org/TR/css3-selectors 
和 特性 专 有 语法 

语音 继续 支持 aural 样式 表 , 引入 新 的 值 以 改善 发 音 ,例如 phonemes，| www.w3.org/TR/css3-speech 
但 是 有 些 似 乎 也 就 是 改 了 一 下 名 称 。 例 如 ，stress 成 为 
voice-stress，pitch 成 为 voice-pitch、volume 成 为 voice-volume 

模板 布局 定义 的 布局 网 格 用 于 Web 应 用 程序 和 文档 的 定位 和 对 齐 。 提供 | www.w3.org/TR/css3-layout 
类 似 于 模板 的 系统 ， 与 经 典 的 标记 表格 相似 

文本 定义 文本 处 理 ， 包 含 对 齐 、 换 行 、 调 整 、 文 本 装饰 、 文 本 变形 | www.w3.org/TR/css3-text 
和 空格 处 理 

切换 定义 属性 修改 如 何在 特定 的 时 间 周 期 应 用 CSS 规则 ， 对 于 简单 | www.w3.org/TR/css3-transitions 
的 视觉 变化 动画 效果 很 有 用 

用 户 界面 定义 用 于 提供 用 户 界面 样式 的 属性 和 选择 器 ， 例 如 光标 和 导航 | www.w3.org/TR/css3-ui 
处 理 ， 还 有 当前 元 素 状 态 ， 例 如 有 效 和 无 效 、 激 活 和 禁用 等 

网 络 字体 编码 ， 改 善 可 下 载 字体 ，Intemet Explorer 一 直 支 持 该 功能 Www.w3.0rg/TR/css3-webfonts, 

值 与 单位 扩展 测量 的 绝对 与 相对 单位 ， 包 括 为 支持 动画 和 声音 而 进行 的 | www.w3.org/TR/css3-values 


时 间 单 位 s 和 ms) 与 角度 单位 (deg 和 rad) 值 的 变化 


7.4.2 CSS3 新 增 属性 及 伪 类 
下 面 介绍 一 些 CSS3 新 增 属性 及 伪 类 。 
1. CSS3 新 增 属 性 
(1) 背景 和 边框 


border-radius: 设置 四 个 角 的 形状 。 
box-shadow: 给 盒子 添加 一 个 或 多 个 阴影 。 
border-image: 指定 一 幅 图 像 作 为 元 素 的 边框 。 
background-size: 规定 背景 图 片 的 尺寸 。 
background-origin: 规定 背景 图 片 的 定位 区 域 。 
background-clip: 规定 背景 图 片 的 绘制 区 域 。 
(2) 文本 效果 


@ text-shadow: 设置 文字 阴影 。 
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e@ ”word-wrap: 强制 换行 。 

@ word-break: 控制 对 象 内 文本 的 字 内 换行 行为 。 

CSS3 提出 的 @font-face 规则 中 定义 了 font-family、font-weight、font-style、ont-stretch 、src、 
unicode-range 属性 。 

(3) 2/3D 转换 

e ”transform: 向 元 素 应 用 2/3D 转换 。 

e@ ”transition: 过 渡 。 

(49 动画 

ee @keyframes 规则 : 用 于 定义 动画 规则 中 出 现 的 属性 。 

e animation: 该 简写 属性 用 于 一 次 性 设置 所 有 的 动画 属性 。 

e animation-name: 用 于 定义 应 该 运行 的 动画 。 

e animation-duration: 用 于 定义 动画 播放 一 次 的 时 间 。 

(5) 用 户 界面 (常用 ) 

@ ”box-sizing: 修改 测量 元 素 宽度 的 计算 方式 。 

e@ ”resize: 用 于 定义 元 素 是 否 应 该 调整 大 小 ， 如 果 需 要 调整 大 小 ， 那 么 以 哪个 轴 进 行 调整 。 


2. CSS3 新 增 伪 类 


:nth-child(n): 选择 是 父 元 素 的 第 n 个 子 元 素 的 元 素 。 
-nth-last-child(n): 选择 是 父 元 素 的 倒数 第 n 个 子 元 素 的 元 素 。 
:only-child: 选择 是 父 元 素 的 唯一 子 元 素 的 元 素 。 

:last-child: 选择 是 父 元 素 的 最 后 一 个 子 元 素 的 元 素 。 
:nth-of-type(n): 选择 同类 的 并 且 是 父 元 素 的 第 mn 个 子 元 素 的 元 素 。 
:only-of-type: 选择 同类 的 并 且 是 父 元 素 的 唯一 子 元 素 的 元 素 。 
:empty: 选择 没有 子 元 素 的 元 素 。 

:target : 这 个 伪 类 人 允许 选择 基于 URL 的 元 素 。 如 果 这 个 元 素 有 识别 器 (比如 跟着 一 个 要 ， 那 
么 :target 会 对 使 用 这 个 ID 识别 器 的 元 素 增加 样式 。 

:enabled: 这 个 伪 类 人 允许 选择 当前 可 用 的 元 素 。 

:disabled: 这 个 伪 类 允许 选择 当前 禁用 的 元 素 。 

:checked: 这 个 伪 类 允许 选择 选中 的 复 选 框 元 素 。 

:not(s): 选择 与 选择 器 s 不 匹配 的 元 素 。 


7.4.3 CSS3 的 优点 


随 着 CSS3 不 断 演进 ， 设 计 者 的 工作 将 变 得 越 来 越 简单 。 流 水 线 设 计 改进 了 工作 流程 ， 将 直觉 
方面 推 给 浏览 器 , 这 样 就 不 用 在 Photoshop 上 花 更 多 时 间 , 也 不 用 在 写 标记 或 CSS 规则 花 更 多 时 间 。 


1.， 流水 线 设计 


一 般 来 说 ，Web 设计 过 程 (从 视角 角度 看 ) 是 : 首先 用 Photoshop 创建 新 的 设计 ， 然 后 用 HIML 
和 CSS 进行 再 创建 。 这 种 设计 过 程 已 经 开始 改变 了 。 由 于 要 适应 许多 设备 、 浏 览 器 和 上 下 文 ， 因 此 
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越 来 越 多 的 设计 者 开始 “在 浏览 器 中 ”设计 。 

如 果 使 用 CSS3，Web 设计 就 不 再 需要 使 用 Photoshop 或 其 他 图 形 编辑 器 了 。 可 以 将 许多 视觉 任 
务 交 给 浏览 器 ， 然 后 直接 在 浏览 器 中 创建 效果 ， 而 以 前 则 需要 图 形 编辑 器 才能 实现 这 些 效果 。 

这 不 仅 会 改进 工作 流程 ， 缩 短 项 目 工期 ， 而 且 可 以 让 维护 和 变更 请 求 变 得 更 容易 。 如 果 客 户 要 
求 改 变 呢 ? 没 问题 ， 改 变 CSS 就 行 。 不 必 再 费力 地 使 用 图 形 编辑 器 。 

因此 ，CSS3 提供 了 许多 能 够 创建 效果 的 新 方法 ， 而 这 些 效果 以 前 必须 费力 才能 完成 。 


2. 减少 工作 区 和 要 做 修改 


使 用 CSS3 可 以 避免 整个 工作 区 ， 包 括 : 

e ”指定 丰富 的 Web 字体 。 不 需要 在 图 形 编辑 器 中 创建 类 型 ， 也 不 需要 通过 图 形 蔡 代 或 者 使 用 
sIFR 这 样 的 工具 。 

自动 创建 圆 角 。 不 依赖 图 形 来 创建 带 圆 角 的 方 框 。 可 以 使 用 border-radius 自动 处 理 。 

不 透明 性 和 alpha 通道 。 使 用 opacity 或 rgba 创建 透明 度 。 

创建 浮动 梯度 。 不 再 为 梯度 或 模式 创建 重复 图 形 。 只 需要 使 用 CSS 梯度 (辐射 状 或 线性 的 )。 
减少 简单 动画 的 脚本 。 不 需要 使 用 JavaScript 创建 简单 过 渡 或 转换 。 可 以 用 CSS 处 理 。 
减少 其 他 标记 。 不 需要 通过 写 其 他 标记 来 创建 各 种 栏 。 

更 少 的 类 。 当 使 用 新 的 CSS3 选择 器 能 够 定位 元 素 时 ， 不 需要 添加 其 他 无 关 类 。 


一 个 基本 实例 


a 


现在 来 看 一 个 实例 ， 它 展示 了 一 组 CSS 规则 如 何 转 变 HTML 页 面 的 外 观 。 

例 7-3: CSS 规则 可 存放 于 HTML 文档 内 。 本 例 使 用 单独 的 文件 保存 CSS 规则 ， 而 HTML 页 
面 则 包含 指向 该 文件 的 链接 。 

在 查看 样式 表 之 前 ， 先 来 看 一 下 图 7-8。 图 7-8 展示 了 将 要 应 用 样式 的 HTML 页 面 在 关联 CSS 
规则 前 自身 的 外 观 。 


© © Me//F/hS+css3h5/cno7/7-2 uml 


Basic CSS Font Properties 


The following table shows you the basic CSS font properties that alow you to change the 
documents 


ppearance of text in your 


Property Purpose 
font-family Specifies the font used. 

font-size 。 Specifies the size of the font used. 

font-style «Specifies whether the font should be normal italic or 
font-weight Specifies whether the font should be me 


”图 7.8 未 关联 Css 规 则 的 HTML 页 面 


图 7-8 展示 的 页 面包 含 一 个 标题 、 一 个 段落 以 及 一 个 表格 。 在 <head> 元 素 内 有 一 个 <link> 元 素 ， 
它 告 知 浏览 器 从 何 处 找到 用 于 设置 页 面 样式 的 样式 表 文 件 。 样 式 表 文 件 的 位 置 通过 href 特性 的 值 给 
出 。 此 外 还 要 注意 一 些 <td> 元 素 中 是 如 何 包含 值 为 code 的 class 特性 的 。 这 样 做 可 以 将 文档 中 包含 
代码 的 表格 单元 格 与 文档 中 的 其 他 <td> 元 素 区 别 开 来 。 
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<!DOCTYPE html> 


<title>CSS Example</title> 
<link rel="stylesheet" href="7-2.css"> 
</head> 
<body> 
<hl>Basic CSS Font Properties</h1> 
<p>The following table shows you the basic CSS font properties that allow 
you to change the appearance of text in your documents.</p> 
<table> 


<td class="code">font-family</td> 
<td>Specifies the font used.</td> 
< 
<t> 
<td class="code">font-size</td> 
<td>Specifies the size of the font used.</td> 
< 
<b> 
<td class="code">font-style</td> 
<td>Specifies whether the font should benormal,italic or oblique.</td> 
< 
<b> 
<td class="code">font-weight</td> 
<td>Specifies whether the font should be normal, bold bolder, or lighter</td> 
< 


D css pample 


© © fileVWFVh5+css3/h5/ch0717-2.html 


Basic CSS Font Properties 


The following table shows you the basic CSS font propertes that aliow you to change the appearance of text in 
Your documents. 


Property Purpose 
font-family Specifies the font used. 
| font-size Specifies the size ofthe font used 
Font-style Specifies whether the font should be normal italic or oblique | 
font-weight Specifies whether the font should be normal, bold, bolder orlighter | 


79 关联 Css 规则 后 的 HTML 页 面 
可 以 在 与 创建 HTML 页 面相 同 的 编辑 器 中 创建 样式 表 。 在 创建 完 CSS 文件 后 ， 以 名 称 


203 


HTML5+CSS3 网 页 设计 己 倒 教程 


extension.css 保存 文件 。 
本 例 的 样式 表 中 使 用 了 多 条 CSS 规则 。 现 在 逐条 查看 这 些 规则 ， 从 而 了 解 每 条 规则 的 作用 。 
在 第 一 条 规则 之 前 ， 有 一 条 注释 ， 告 知 本 样式 表 是 为 哪个 文件 编写 的 。 任 何 位 于 开始 符 /* 与 
结束 符 */ 之 间 的 内 容 都 会 被 浏览 器 忽略 ， 因 此 对 页 面 的 显示 没有 任何 影响 。 
M* Style sheet for 7-2.html */ 
在 注释 之 后 ， 第 一 条 规则 被 应 用 于 <body> 元 素 。 它 指明 页 面 中 的 任何 文本 与 线 型 的 默认 颜色 应 
为 黑色 ， 而 页 面 背景 应 为 白色 。 这 里 的 颜色 使 用 十 六 进 制 代码 表示 。 它 同样 还 声明 整个 文档 应 使 用 
的 字体 为 Arial。 如 果 Arial 字体 不 可 用 ， 则 使 用 Verdana 字体 代 蔡 。 如 果 仍然 失败 ， 就 使 用 与 通用 
字体 族 相对 应 的 默认 字体 族 。 
body { 
color:-#000000; 
background-color : #fFFFF: 
font-family : arial, verdana, sans-serif 


注意 : 
通常 应 为 文档 主体 指定 background-color 属性 ， 因 为 有 的 用 户 会 修改 计算 机 窗口 的 默认 背景 闫 
色 。 如 果 不 设置 该 属性 ， 这 些 用 户 的 浏览 器 窗口 的 背景 颜色 会 使 用 他 们 各 自选 择 的 颜色 。 


接 下 来 的 两 条 规则 简单 地 分 别 指定 <h1> 及 <p> 元 素 中 内 容 的 大 小 ， 其 中 px 代表 像素 。 


ht 
font-size : 18px; 
} 
p{ 
font-size : 12px; 
} 
接 下 来 ， 添加 一 些 控制 表格 外 观 的 设置 。 首 先 ， 添 加 浅 灰色 背景 。 然后， 在 边界 四 周 画 上 边框 。 
三 个 属性 被 用 于 描述 边框 : 第 一 个 指明 它 是 一 条 实 线 (而 不 是 虚线 或 点 虚线 ), 第 二 个 指明 它 应 该 为 1 
像素 宽 ， 第 三 个 则 指明 它 应 该 为 浅 灰 色 。 
table { 
background-color : #efefef: 
border-style : solid; 
border-width : 1px: 
‘border-color : #999999: 
} 
在 表格 内 ， 表 头 应 该 具有 中 等 灰色 的 背景 ， 比 表格 主体 颜色 略 深 ， 文 本 应 该 以 粗 体 显示 ， 而 且 
在 单元 格 边缘 与 文本 之 间 应 该 有 5 个 像素 的 内 边 距 。 
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表格 的 每 个 数据 单元 也 应 该 具有 5 个 像素 的 内 边 距 , 与 表 头 类 似 。 添加 内 间距 使 得 文本 更 易 读 ， 
而 如 果 没 有 内 间距 ， 一 列 中 的 文本 则 可 能 与 右 侧 紧 挨 着 相 邻 列 中 的 文本 重 营 : 
td{ 
Padding : 5px: 
} 
在 前 面 的 图 7-9 中 ,包含 CSS 属性 名 称 的 表格 单元 使 用 了 Courier 字体 。 如 果 看 一 下 HIML 文 
档 中 对 应 的 表格 单元 ， 可 以 看 到 它们 带 有 值 为 code 的 class 特性 。 就 自身 而 言 ，class 特性 不 会 改变 
文档 的 显示 ， 但 class 特性 却 使 你 可 以 将 CSS 规则 与 lass 特性 为 某 个 指定 值 的 元 素 相关 联 。 因 此 ， 
下 面 的 规则 只 应 用 于 设置 有 值 为 code 的 class 特性 的 <td> 元 素 ， 而 非 全 部 <td> 元 素 : 
td.code { 
font-family : courier, couri , Serif; 
font-weight : bold; 
} 
要 指定 某 个 class 特性 为 特定 值 的 元 素 时 ， 需 要 在 特性 值 前 添加 句点 ， 如 本 例 中 的 .code。 


本 章 小 结 


本 章 介绍 了 CSS 的 历史 演变 和 功能 检测 方法 ， 并 讨论 了 浏览 器 支持 、 厂 商 前 组 等 知识 ; 介绍 了 
样式 表 由 规则 组 成 ， 对 于 每 条 规则 ， 首 先 要 选择 将 应 用 到 的 一 个 或 多 个 元 素 ， 然 后 会 包含 用 于 指定 
元 素 内 容 应 如 何 显示 的 “属性 / 值 ”对 。 本 章 简 述 了 属性 、 值 、 声 明和 声明 块 的 概念 ， 介 绍 了 CSS 
的 继承 特色 和 属性 。 本章 还 论述 了 如 何在 文档 中 添加 CSS 规则 , 介绍 了 CSS3 的 模块 化 和 新 增 特性 。 
最 后 用 实例 介绍 了 如 何 编写 CSS。 


[区 4 思考 和 练习 


. 在 HTML 文档 中 ， 使 用 CSS 的 方法 有 哪些 ? 

. 在 HTML 文档 中 ， 引 用 外 部 样式 表 应 在 文档 的 什么 位 置 ? 

.外 部 样式 表 文件 通常 是 什么 样 的 文件 ? 

. 在 HTML 文档 中 ， 引 用 外 部 样式 表 文 件 mystyle.css 的 代码 是 怎样 的 ? 
. 举例 简 述 CSS 规则 。 

. 简 述 CSS3 的 优点 。 


moDr- 


205 


第 8 章 


为 了 使 用 CSS 给 元 素 设置 样式 ， 首 先 需要 指定 元 素 。 输 入 CSS 选择 器 ,就 可 以 在 DOM 中 指定 
特定 的 元 素 。 使 用 CSS3 选择 器 ， 可 以 用 非常 短 的 标记 清晰 和 灵活 地 指定 元 素 。 而 且 ， 新 的 元 素 状 
态 伪 类 还 允许 突出 显示 动态 的 状态 变化 。 

本 章 将 介绍 选择 器 的 基础 知识 ， 讨 论 CSS3 特性 选择 器 、 结 构 元 素 状态 、:target 以 及 否定 伪 类 。 
然后 简要 论述 CSS 2.1 中 生成 内 容 的 伪 元 素 :before 和 :after， 了 解 它们 如 何 与 HIMLS 的 内 容 相 结 
合 ， 并 介绍 CSS3 中 新 的 双 冒 号 语法 。 最 后 介绍 当前 浏览 器 对 CSS 选择 器 的 支持 ， 以 及 CSS 选择 器 
的 其 他 知识 。 

本 章 的 学 习 目 标 : 

。 掌握 选择 器 的 基础 知识 

e@ 掌握 CSS3 选择 器 


[ 玉 W 选择 器 概述 


W3C Selectors Level 3 模块 在 2011 年 9 月 成 为 推荐 标准 。 它 列 出 了 所 有 的 选择 器 ， 将 近 40 个 ， 
不 只 是 CSS3 中 的 选择 器 。 这 是 因为 CSS3 并 不 是 全 新 的 规范 ， 而 是 建立 在 CSS1 和 CSS 2.1 基础 
a 

CSS1 引入 的 选择 器 如 表 8-1 所 示 。 


表 8-1 CSS1 选择 器 

选择 器 举例 说 明 
类 型 {:} 和 blockquote {..} 
后 继 组 合 器 blockquotep {...} 
ID <article id="content"> 上 的 #content {..} 
类 <article class="hentry"> 上 的 hentry {...} 
链接 伪 类 alink{..….} 或 arvisited {...} 
用 户 动作 伪 类 aactive {...} 
:first-line 伪 元 素 :first-line {... 
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:first-letter 伪 元 素 pfirst-letter {...} 


CSS 2.1 引入 了 另外 11 个 选择 器 ， 如 表 8-2 所 示 。 


表 8-2 CSS2.1 引入 的 选择 器 


选择 器 举例 说 明 
通用 + 人 
用 户 动作 伪 类 ahover {..} 和 a:focus {..} 
:lang0 伪 类 article:lang(fr) {...} 
结构 伪 类 pfirst-child {...} 
:before 和 :after 伪 元 素 blockquote:before {..} 或 aafier {..} 
子 组 合 器 hl2>p{..} 
邻近 的 同 级 组 合 器 IPT 
特性 选择 器 input [required] {...} 
特性 选择 器 ， 精确 等 于 input "checkbox"] {... 
子 串 特性 选择 器 ， 约 等 于 字符 串 input [class~—"long-field"] {...} 
子 串 特性 选择 器 ， 字 符 串 的 开头 用 连 字符 分 隔 input [langFF"en"] {...} 


CSS3 Selectors Level 3 模块 建立 在 这 些 选择 器 的 基础 上 , 并 添加 了 一 些 功能 。 在 CSS3 中 引入 的 
选择 器 如 表 8-3 所 示 。 
表 8-3 CSS3 引入 的 选择 器 
选择 器 举例 说 明 

一 般 同 级 组 合 器 
子 串 特性 选择 器 ， 字 符 串 以 子 串 开 头 
子 串 特性 选择 器 ， 字 符 串 以 子 串 结尾 ] 二 
子 串 特性 选择 器 ， 字 符 串 包含 子 串 alhref*="twitter"] {... 


:target0 伪 类 Section:target {... 

结构 伪 类 :nth-child tr:nth-child(even) td 全. 

结构 伪 类 :nth-last-child trnth—last-child(-n+5) td {...} 
结构 伪 类 :last-child ul ti:last-child {...} 

结构 伪 类 :only-child ul li:only-child { 

结构 伪 类 :first-of-type Pr:first-of-type {...} 

结构 伪 类 :last-of-type Pilast-of-type {...} 

结构 伪 类 :nth-of-type linth-of-type(3n) {..} 

结构 伪 类 :nth-last-of-type li:nth-last-of-type(1) {..} 

结构 伪 类 :only-of-type article img:only-of-type {... 
结构 伪 类 :empty aside:emp 

结构 伪 类 :root root 人 

UI 元 素 状态 伪 类 :disabled 和 :enabled inputdisabled {...} 

元 素 状态 伪 类 :checked input[type="checkbox"]:checked {...} 
否定 伪 类 :not abbr-not([title] 
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ED 选择 器 


要 影响 文本 呈现 的 属性 ,可 以 使 用 样式 规则 将 这 些 属性 应 用 于 元 素 。 使 用 不 同类 型 的 “选择 器 ” 
指定 哪些 元 素 可 以 应 用 某 一 样式 规则 。 其 实 有 多 种 方式 可 以 实现 该 目的 ， 而 并 非 仅 能 通过 元 素 名 称 
(这 类 选择 器 被 称 为 “简单 选择 器 ”)， 也 可 以 使 用 class 及 id 特性 的 值 进 行 指定 。 接 下 来 将 详细 介绍 
各 种 选择 方式 。 


8.2.1 通用 选择 器 

“通用 选择 器 ”用 一 个 “ 星 号 ”(*) 表 示 ， 作 用 类 似 于 匹配 文档 中 全 部 元 素 类 型 的 通配符 。 

如 果 需 要 将 某 条 规则 应 用 于 全 部 元 素 ， 可 以 使 用 此 选择 器 。 某 些 时 候 它 还 被 用 于 设置 应 用 于 整 
个 文档 的 默认 值 (如 font-family 和 font-size), 除非 使 用 更 为 具体 的 选择 器 指定 某 一 元 素 中 对 应 的 相同 
属性 应 使 用 其 他 值 。 

这 种 做 法 与 对 <body> 元 素 应 用 默认 样式 稍 有 不 同 ， 因 为 通用 选择 器 应 用 于 每 一 个 元 素 ， 而 不 依 
赖 从 应 用 于 <body> 元 素 的 规则 中 继承 的 属性 。 


8.2.2 ”类 型 选择 器 


“类 型 选择 器 ”匹配 在 由 逗号 分 隔 的 列表 中 指定 的 所 有 元 素 。 它 使 你 能 够 将 相同 的 规则 应 用 于 多 
个 元 素 。 例 如 ， 如 果 需 要 将 相同 的 规则 应 用 于 不 同 尺寸 的 标题 元 素 ， 下 面 的 规则 将 匹配 所 有 <h1>、 
<h2> 以 及 <h3> 元 素 : 


hl,h2,h3 {} 


8.2.3 ”类 选择 器 


“类 选择 器 ”能 够 将 规则 与 一 个 (或 多 个 ) 包 含 class 特性 的 元 素 相 匹配 ，class 特性 的 值 匹配 在 类 
选择 器 中 指定 的 值 。 例 如 ， 假 设 有 一 个 <aside> 元 素 ， 其 class 特性 的 值 为 BackgroundNote， 如 下 
所 示 : 

aside class—"BackgroundNote"> This paragraph contains an aside </aside> 

可 以 通过 两 种 方式 之 一 使 用 类 选择 器 。 一 种 是 简单 指定 一 条 可 以 应 用 于 任何 class 特性 值 为 
BackgroundNote 的 元 素 的 规则 。 如 下 所 示 ， 在 class 特性 的 值 之 前 有 一 个 句点 或 完全 停止 符 前 缀 : 

.BackgroundNote {} 

另 一 种 方式 是 创建 一 个 选择 器 , 仅 匹 配 带 有 值 为 BackgroundNote 的 class 特性 的 <aside> 元 素 (而 
非 其 他 元 素 )， 例 如 : 

aside BackgroundNote {} 

如 果 有 多 种 元 素 ， 都 带 有 class 特性 并 且 值 相同 (例如 ，<aside> 元 素 与 <div> 元 素 可 能 都 使 用 带 有 
相同 值 的 class 特性 )， 并 且 和 希望 这 些 元 素 的 内 容 都 以 相同 的 方式 显示 ， 那 么 应 该 使 用 第 一 种 标记 方 
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式 。 如 果 定 义 的 样式 专门 用 于 class 特性 值 为 BackgroundNote 的 <aside> 元 素 ， 那 么 应 该 使 用 第 二 种 
标记 方式 。 

class 特性 还 可 以 包含 多 个 以 空格 分 隔 的 值 ， 例 如 : 

<p class—"important code"> 

可 以 使 用 如 下 语法 指定 某 个 class 特性 值 同 时 包含 important 及 code 的 元 素 (不 过 ，IE7 是 正 浏 
览 器 中 第 一 个 支持 这 种 语法 的 版 本 )。 

pimportantcode {} 


8.2.4 id 选择 器 


“id 选择 器 ”与 类 选择 器 的 工作 方式 类 似 ， 只 是 它 作用 于 过 特性 。 在 id 特性 值 前 需要 使 用 一 个 
“# ”号 。 因 此 ， 一 个 过 特性 值 为 abstract 的 元 素 ， 可 以 使 用 如 下 选择 器 进行 标识 : 

#abstract 

因为 id 特性 的 值 在 文档 中 应 该 保持 唯一 ， 所 以 id 选择 器 应 该 仅 应 用 于 元 素 的 内 容 (而 且 应 该 不 
指定 元 素 的 名 称 )。 


8.2.5 子 选择 器 


“ 子 选择 器 ”匹配 某 一 元 素 的 直接 子 元 素 。 在 下 面 的 例子 中 ， 它 匹配 <td> 元 素 中 任何 作为 其 直接 
子 元 素 的 <b> 元 素 。 两 个 元 素 的 名 称 使 用 一 个 “大 于 号 ”(>) 分 隔 ， 指 明 <b> 是 <td> 的 子 元 素 ， 此 处 该 
符号 称 为 “连接 符 ”: 

tb 人 

它 将 使 你 能 够 对 作为 <td> 元 素 的 直接 子 元 素 的 <b> 元 素 ， 设 置 一 种 有 别 于 文档 中 其 他 位 置 出 现 
的 <b> 元 素 的 样式 。 

作为 <td> 元 素 的 直接 子 元 素 ， 在 <td> 开 始 标签 与 <b> 元 素 之 间 不 应 存在 任何 其 他 标签 。 例 如 ， 下 
面 的 选择 器 毫 无 意义 ， 因 为 <b> 元 素 不 应 该 成 为 <table> 元 素 的 直接 子 元 素 (相反 ，<tr> 元 素 则 更 可 能 
成 为 <table> 元 素 的 直接 子 元 素 )。 

table>b {} 

下 7 是正 浏览 器 中 第 一 个 支持 子 选择 器 的 版 本 。 


8.2.6 ”后 代 选 择 器 

“后 代 选 择 器 ”匹配 一 种 元 素 类 型 ， 该 元 素 为 另 一 指定 元 素 的 后 代 元 素 ( 或 者 说 嵌 套 于 另 一 指定 
元 素 内 )， 而 并 非 仅仅 是 直接 子 元 素 。 尽 管 大 于 号 被 用 作 子 选择 器 的 连接 符 ， 但 是 后 代 选 择 器 的 连接 
符 却 是 空格 。 查 看 以 下 示例 : 

tableb 全 


在 本 例 中 ， 选 择 器 匹配 <table> 元 素 中 的 任何 <b> 子 元 素 ， 这 意味 着 该 规则 将 应 用 于 <td> 及 <th> 
元 素 之 间 的 全 部 <b> 元 素 。 
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这 与 子 选择 器 形成 了 鲜明 对 比 ， 因 为 它 应 用 于 <table> 元 素 的 全 部 子 元 素 ， 而 并 非 仅仅 是 直接 子 
元 素 。 


8.2.7” 相 邻 兄 弟 选择 器 


“ 相 邻 兄弟 选择 器 ”匹配 一 种 作为 其 他 元 素 相 邻 兄弟 的 元 素 类 型 。 例 如 ， 如 果 希 望 使 任何 一 级 标 
题 后 的 第 一 个 段落 与 其 他 <p> 元 素 采 用 不 同 的 样式 ， 可 以 通过 如 下 类 似 方式 使 用 相 邻 兄弟 选择 器 ， 
仅 为 <h1> 元 素 后 出 现 的 第 一 个 <p> 元 素 指定 规则 : 

hlip 全 

下 7 是 正 浏 览 器 中 第 一 个 支持 相 邻 多 弟 选择 器 的 版 本 。 


8.2.8 一般 兄弟 选择 器 


“一 般 兄 弟 选择 器 ”匹配 其 他 元 素 的 兄弟 元 素 类 型 。 不 过 ， 不 必 是 直接 前 方 相 邻 的 元 素 。 因 此 ， 
假设 有 两 个 <p> 元 素 同时 是 <h1> 元 素 的 兄弟 元 素 ， 它 们 都 会 使 用 如 下 选择 器 指定 的 规则 。 

hl~p 全 

一 般 兄弟 选择 器 是 CSS3 的 一 部 分 。 正 7 是 正 浏览 器 中 第 一 个 支持 一 般 兄 弟 选择 器 的 版 本 ， 而 
Firefox 2 则 是 Firefox 浏览 器 中 第 一 个 支持 的 版 本 。 


8.2.9 子 选 择 器 与 相 邻 兄弟 选择 器 的 用 途 


子 选择 器 与 相 邻 兄 弟 选择 器 都 很 重要 ， 因 为 它们 能 够 减少 在 HIML 文档 中 需要 添加 的 class 特 
性 的 数量 。 

为 所 有 可 能 性 都 添加 类 型 很 容易 做 到 。 例 如 ， 如 果 和 希望 <h1> 元 素 后 的 第 一 个 段落 以 粗 体 显示 ， 
需要 为 每 一 个 <h1> 元 素 后 的 第 一 个 <p> 元 素 都 添加 class 特性 。 尽 管 这 样 也 可 以 工作 ， 但 是 标记 会 被 
各 种 类 型 弄 得 非常 凌乱 ， 而 设置 这 些 类 型 的 初衷 只 是 为 了 简化 对 页 面 呈 现 的 控制 。 

如 果 又 决定 将 每 一 个 <h1> 元 素 后 的 前 两 个 <p> 元 素 以 粗 体 显 示 ， 就 需要 回 过 头 为 每 一 个 <h1> 元 
素 后 的 第 二 个 <p> 元 素 添加 新 的 class 特性 。 因 此 ， 子 选择 器 与 相 邻 兄弟 选择 器 对 于 设置 文档 样式 以 
及 使 标记 更 简洁 ， 提 供 更 强 的 灵活 性 。 

查看 如 下 HTML 内 容 : 

<p>Paragraph One: not inside a div element.</p> 

<div> 

<p>Paragraph One: inside a div element</p> 

<p>Paragraph Two: inside a div element </p> 

<p>Paragraph Three: inside a div element </p> 

<p>Paragraph Four: inside a div element </p> 

<p>Paragraph Five: inside a div element </p> 
<div> 


通过 仅 使 用 子 选择 器 与 相 邻 兄 弟 选择 器 ， 就 能 创建 类 似 于 图 8-1 中 页 面 的 效果 。 
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Ee Edt Yew Hstory Booimals Ioos Hep 


Paragraph One: not inside a div element 


Paragraph Two. nside a oh element 


Paragraph Three nside 3 on element 


Paragraph Four Inside a dv element | 


Paragraph Fve: nside a dv element 


Paraoraph She nside 3 dh element ] 


图 8-1 使 用 子 选择 器 与 相 邻 兄弟 选择 器 的 页 面 效果 


三 个 不 同 段落 的 样式 为 : 
e 第 一 段 没 有 边框 及 背景 色 。 
e <div> 元 素 内 的 所 有 段落 都 有 边框 。 
e 最 后 三 个 段落 具有 灰色 背景 与 边框 。 
不 同 的 段落 样式 不 是 通过 三 个 class 指定 的 ， 而 是 通过 一 条 规则 控制 所 有 段落 中 使 用 的 字体 : 
p{ 
font-family : arial, verdana, sans-serif 
} 
下 面 是 第 二 条 规则 ， 用 于 <div> 元 素 内 的 所 有 段落 ， 因 为 第 一 个 段落 没有 位 于 <div> 元 素 内 ， 所 
以 该 规则 不 会 应 用 于 第 一 个 段落 。 
div>p{ 
border : 1px solid #000000; 
第 三 条 规则 匹配 任何 连续 出 现 的 <p> 元 素 中 的 第 三 个 段落 (因为 第 四 及 第 五 个 <p> 元 素 的 前 面 
有 两 个 <p> 元 素 ， 所 以 该 规则 同样 适用 于 二 者 以 及 <div> 元 素 中 的 第 三 个 <p> 元 素 )。 
ptptp{ 
‘background-color : #999999; 
} 
记 住 本 例 无 法 在 下 6 以 及 更 早 版 本 的 正 浏览 器 中 运行 , 因为 这 些 选择 器 是 在 正 7 中 第 一 次 被 引 
入 的 。 


8.2.10 ”特性 选择 器 


特性 选择 器 能 够 在 选择 器 中 使 用 元 素 包含 的 特性 及 其 取 值 。 有 多 种 特性 选择 器 可 供 使 用 ， 它 们 
使 得 以 复杂 方式 选择 文档 中 的 元 素 成 为 可 能 。 

对 特性 选择 器 的 使 用 受到 很 大 限制 ， 因 为 只 有 最 新 版 本 的 浏览 器 才 实现 对 它们 的 支持 。 表 8-4 
中 列 出 的 部 分 特性 选择 器 来 自 CSS3。 


表 84 CSS 特性 选择 器 


名 称 示例 匹 配 
存在 选择 器 plid] 任何 带 有 过 特性 的 <p> 元 素 
相等 选择 器 pi "summary"] 任何 带 有 过 特 性 并 且 值 为 summary 的 <p> 元 素 
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里 井 
各 称 到 全 匹 配 

任何 带 有 class 特性 ， 值 为 由 空格 分 隔 的 单词 列表 ， 并 且 其 
人 
i Cn 中 包含 单词 HTML 的 <p> 元 素 
ee 有 任何 带 有 language 特性 ， 值 以 en 开头 并 且 后 接 一 个 连 字符 
TE | ( 司 纺 的-p> 元 素 (此 特性 选择 器 专门 用 于 Imnguage 特性 
前 缀 选择 器 (CSS3) 任何 带 有 以 字母 “b” 开 头 的 特性 的 <p> 元 素 (CSS3) 
子 字符 中 选择 器 (CSS3) 任何 带 有 包含 字母 on 的 特性 的 p> 元素 (CSS3) 
后 缀 选择 器 (CSS3) 任何 带 有 以 字母 x 结尾 的 特性 的 <p> 元 素 (CSS3) 


正 系列 浏览 器 在 正 7 中 引入 了 这 些 特性 选择 器 .Firefox 浏览 器 从 Firefox 2 开始 支持 这 些 特性 选 
择 器 。 

下 面 是 一 个 使 用 这 些 特 性 选择 器 的 示例 。 如 下 有 7 个 不 同 的 段落 元 素 ， 每 一 个 都 包含 不 同 的 特 
性 及 特性 值 : 


<p id="introduction">Here’s paragraph one; each paragraph has different attributes.</p> 

<p id="summary">Here’s paragraph two; each paragraph has different attributes.</p> 

<p class="important HTML">Here's paragraph three: each paragraph has different attributes.</p> 
<p language="en-us">Here’s paragraph four; each paragraph has different attributes.</p> 

<p class="begins">Here's paragraph five:; each paragraph has different attributes.</p> 

<p class="contains">Here’s paragraph six; each paragraph has different attributes.</p> 

<p class="suffix">Here’s paragraph seven; each paragraph has different attributes.</p> 


使 用 特性 选择 器 将 不 同样 式 规则 关联 到 每 一 个 元 素 的 CSS 样式 表 : 


Plid] { 
border : 1px solid #000000; 
} 
Plid="summary"] { 
background-color : #999999; 
} 
plclass~="HIML"] { 
border : 3px solid #000000; 
} 
Pllanguaget="en"] { 
color : #fFFFF: 
background-color : #000000; 
} 
Plclass‘="b"]{ 
border : 3px solid #333333; 
} 
plelass+—"on"] { 
color : #fFFFE: background-color:#333333; 
下 
plclass$="x"] { 
border : 1px solid #333333; 
} 


在 图 8-2 中 可 以 看 到 页 面 效果 。 
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图 8-2 使 用 特性 选择 器 的 页 面 效 果 


所 有 选择 器 都 应 该 与 应 匹配 元 素 名 称 的 大 小 写 形式 相 匹配 。 
作为 总 体 规则 ，Chrome、Safari、Firefox 以 及 正 9+ 支 持 所 有 CSS 选择 器 。IE8 是 正 浏览 器 中 支 
持 CSS2 选择 器 的 第 一 个 版 本 。 更 早 版 本 的 正 浏览 器 不 支持 最 基本 的 选择 器 。 


CSS3 选择 器 


CSS3 有 很 多 不 同 的 选择 器 ， 很 难 确定 应 使 用 哪 一 类 选择 器 。 在 介绍 新 的 CSS3 选择 器 时 ， 会 提 
供 这些 选 择 器 的 一 些 实例 ， 读 者 可 以 在 项 目 中 使 用 它们 。 


8.3.1 组合 器 


假定 读者 以 前 使 用 过 CSS， 就 肯定 遇 到 过 组 合 器 。 读 者 肯定 知道 后 继 组 合 器 ， 之 所 以 叫 这 个 名 
称 ， 是 因为 它们 会 选择 出 给 定 元 素 在 文档 树 中 的 子 元 素 。 简 言 之 ， 后 继 组 合 器 可 以 选择 出 一 个 元 素 
中 某 元 素 类 型 的 所 有 实例 ， 例 如 article p {.…}。 

相反 ， 子 组 合 器 只 选择 父 元 素 中 的 直接 子 元 素 ， 它 使 用 大 于 (>) 操 作 符 。 因 此 ，article > p {..…} 会 
选择 出 article 的 子 段落 ， 但 不 会 选择 article 下 项 套 在 section 中 的 段落 ， 如 下 面 的 代码 示例 所 示 : 

article>p { 

font-size:125%; 

} 

下 一 个 组 合 器 是 邻近 同 级 组 合 器 ， 它 选择 文档 树 中 彼此 相 邻 且 有 相同 父 元 素 的 元 素 。 以 上 面 的 
例子 为 例 ， 使 用 + 操作 符 编写 h2 +p{...}， 就 只 给 每 个 section 中 的 起 始 段落 设置 样式 (假定 它们 都 使 
用 h2 标题 ): 

+tp{ 

font-weight:bold; 

} 

下 面 的 代码 说 明了 各 个 选择 器 会 选择 什么 段落 : 

<article> 

<hl>Article Title</h1> 
<p>...</p><!~ Child combinator targets this paragraph 一 > 
<section> 
<h2>Section Title</h2> 
<p>...</p><!-- Adjacent sibling combinator targets this paragraph -> 
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</section> 
<p>...</p><!— Child comibinator targets this paragraph —> 
<larticle> 
前 面 都 是 CSS2.1 包含 的 组 合 器 示例 ， 那 么 CSS3 包含 什么 组 合 器 呢 ? 
CSS3 添加 了 一 般 同 级 组 合 器 ， 它 使 用 波浪 (~) 操 作 符 。 使 用 一 般 同 级 组 合 器 时 ， 第 二 个 选择 器 
不 必 紧 跟 在 第 一 个 选择 器 后 面 ， 但 选择 器 的 两 个 部 分 仍 有 相同 的 父 元 素 。 扩 展 前 面 的 例子 ， 可 以 使 
用 一 般 同 级 组 合 器 ， 选 择 深度 嵌 套 的 section 中 的 襄 : 


h3~uf 
list-style-type:binary; 
} 
<article> 
<hl>Article Title</h1> 
<p>...</p><!~ Child combinator targets this paragraph 一 > 


<p>...</p><!~ Adjacent sibling combinator targets this paragraph —> 
<ul> 
<i>.…<i> 
<ul> 
<section> 
<h3>Section Title</h3> 
<ul><!-- General sibling combinator targets this list —> 


<p>...</p><!~ Child combinator targets this paragraph —> 
</article> 


上 面 演示 了 CSS 中 组 合 器 的 功能 ， 尤 其 是 CSS3 允许 我 们 更 多 地 控制 所 选择 的 元 素 。 


8.3.2 ”特性 选择 器 和 子 串 选 择 器 


前 面 提 到 ，CSS2.1 引入 了 特性 选择 器 。CSS3 增加 了 工具 集中 的 子 串 选 择 器 数量 ， 扩 展 了 可 用 
特性 选择 器 的 列表 。 这 意味 着 现在 可 以 选择 一 条 规则 ， 根 据 特性 值 将 CSS 样式 应 用 于 元 素 。 稍 后 将 
介绍 如 何 使 用 它们 设置 文档 下 载 链接 或 电子 邮件 地 址 的 样式 ， 但 先 回顾 一 下 CSS2.1 的 特性 选择 器 
和 子 串 选择 器 。 

如 果 给 定 的 特性 存在 ， 最 基本 的 特性 选择 器 就 允许 设置 元 素 的 样式 。 例 如 ， 使 用 如 下 代码 ， 可 
以 设置 带 title 特性 的 缩写 元 素 : 
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abbrftitle] { 
border-bottom: 1px dotted #000: 
} 
使 用 required 特性 ， 可 以 指出 需要 的 字段 : 
inputlrequired] { 
background:url(img/mandatory-icon.png) 100% 50% no-repeat: 
} 
使 用 等 号 =) 操作 符 ， 特 性 选择 器 可 以 为 给 定 的 特性 匹配 特定 的 值 ， 例 如 复 选 框 : 
input[type="checkbox"] { 
width:20px; 
height:20px: 
} 
接 下 来 ， 可 以 使 用 波浪 (~) 操 作 符 从 用 空格 分 隔 的 值 列 表 中 选择 特定 的 特性 值 。 这 常常 用 于 带 有 
微 格式 或 微 数据 的 内 容 ， 这 种 内 容 常 常 使 用 多 个 特性 值 : 
<a... rel="external license">...</a> 
选择 rel 特性 值 为 license 的 CSS 规则 如 下 : 


alrel—"license"] { 

background:url(img/copyright.png) 100% 50% no-repeat; 
Padding-right:20px: 

. 

最 后 一 个 CSS2.1 特性 选择 器 用 得 不 多 ， 但 如 果 在 包含 多 种 语言 的 站 点 上 工作 ， 就 可 以 使 用 它 。 
坚 杠 (|) 操 作 符 允许 在 带 连 字符 的 列表 中 选择 以 特定 值 开头 的 元 素 。 假 定 要 选择 指定 了 英语 作为 语言 
的 锚 ， 但 不 考虑 语言 是 英国 英语 (en-GB) 还 是 美国 英语 (en-US)( 因 为 它们 都 包含 “en”)。 

afhreflang="en"] { 

‘border-bottom:3px double #000; 

} 

最 后 两 个 示例 引入 的 两 个 操作 符 可 以 用 于 特性 值 的 子 串 匹配 。CSS3 又 进 了 一 步 ， 使 用 ^、$ 和 和 * 
操作 符 提供 了 另外 3 个 子 串 选 择 器 。 它 们 都 非常 有 用 ， 可 以 用 于 确保 标记 非常 干净 ， 没 有 不 必要 的 
类 ， 同 时 提升 用 户 的 体验 。 

1. ^ 特 性 子 串 选 择 器 

脱 字 符 (9) 与 子 串 选择 器 相关 ， 表 示 “ 以 子 串 开头 ”。 使 用 它 可 以 从 内 容 中 选择 出 所 有 外 部 链接 ， 
并 添加 一 个 小 图 标 ， 以 表示 它们 都 是 外 部 链接 。 下 面 的 代码 使 用 ^ 特 性 子 串 选择 器 为 以 http:/ 开 头 的 
所 有 链接 添加 背景 图 像 和 页 边 距 : 

alhref"—"http:/"] { 


‘background:url(img/extemal.png) 100% 50% no-repeat: 
Padding-right:15px: 
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在 图 8-3 中 ， 外 部 链接 在 锚 的 最 后 添加 了 一 个 小 图 标 。 这 个 小 图 标 由 一 个 方 框 和 一 个 指向 外 部 
的 箭头 组 成 ， 它 已 成 为 表示 外 部 链接 的 被 广泛 接受 的 符号 。 


Perhaps the most famous animal astronaut is Laika &, the Soviet space dog who made her 
historic flight on November 3, 1957. The United States preferred to use monkeys for its 
missions and launched numerous monkey flights primarily between 1948 and 1961 paving the 
way for manned missions. 


图 8-3 用 ^ 特 性 子 串 选择 器 指定 样式 的 外 部 链接 


这 是 给 外 部 链接 快速 添加 图 标的 杰出 方式 ， 但 可 能 有 一 些 以 http:/ 开 头 的 链接 不 是 外 部 链接 ， 
例如 指向 自己 网 站 的 链接 。 此 时 不 希望 显示 这 个 图 标 。 为 了 解决 这 个 问题 ， 可 以 在 最 初 规则 下 的 面 
再 添加 一 条 规则 (因为 它们 的 特性 是 相同 的 )， 对 于 域 的 外 部 链接 ， 将 属性 置 空 。^ 操 作 符 仍 保留 ， 因 
为 链接 可 能 位 于 站 点 的 各 个 页 面 上 。 


a[href 一 http/]{ 


background-url(img/extemal.png) 100% 50% no-repeat; 


图 8-4 显示 了 结果 。 其 中 有 两 个 外 部 链接 用 图 标 表 示 ， 而 为 内 部 链接 (“numerous monkeys”) 
删除 了 图 标 。 


Before humans were launched into space, many animals were propelled heavenwards © to pave 
the way for mankind's pioneering endeavours. These original pioneers, including numerous 
monkeys, served their nations in order to investigate the biological effects of space travel. 


Perhaps the most famous animal astronaut is Laika ©®, the Soviet space dog who made her 
historic flight on November 3, 1957. The United States preferred to use monkeys for its 
missions and launched numerous monkey flights primarily between 1948 and 1961 paving the 
way for manned missions. 


图 8-4 用 ^ 特 性 子 串 选择 器 设置 样式 的 外 部 链接 ， 以 及 没有 设置 样式 的 以 http:/ 开 头 的 内 部 链接 


“操作 符 的 另 一 个 用 途 是 选择 以 mailto: 字 符 串 开头 的 电子 邮件 地 址 链接 ， 并 添加 图 标 和 页 边 距 。 
a[href*="mailto:"] { 


} 


background:url(img/email.png) 100% 50% no-repeat 
Padding-right:15px: 


2. $ 子 串 特性 选择 器 
前 面 介绍 了 ^ 子 串 特性 选择 器 ,下面 看 看 $ 子 串 特性 选择 器 ,语法 与 ^ 相 同 。 常 见 用 法 包括 添加 图 


表示 文档 下 载 的 不 同文 件 类 型 ， 或 者 表示 不 同 的 种 子 类 型 。 


为 了 表示 指向 PDF 文档 的 链接 ， 可 以 使 用 如 下 样式 : 
alhrefs=".pdf"] { 
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Padding-right18px: 
} 
在 图 8-5 中 ， 己 将 文本 “Life magazine” 链 接 到 一 个 PDF 文档 。 使 用 上 述 代码 后 ， 就 把 一 个 小 
的 PDF 图 标 添加 到 了 链接 上 。 
Miss Baker and Able's journey gripped the world's imagination. Appearing on the June 15, 1959 
cover of Life magazine 3 the pair joined a growing list of women celebrities to grace the 


magazine's cover in 1959, a list which included Marilyn Monroe, Zsa Zsa Gabor and Jackie 
Kennedy. 


图 8-5 使 用 S 特 性 子 串 选择 器 给 PDF 链接 设置 样式 
使 用 这 种 方法 可 以 选择 任意 文件 类 型 ， 例 如 .doc、:jpg 或 xml。 
3. * 子 串 特性 选择 器 


要 介绍 的 最 后 一 个 子 串 选择 器 使 用 星 号 * 操 作 符 ， 表 示 “ 包 含 ”。 它 允许 选择 应 用 了 多 个 类 的 元 
素 ， 还 可 以 用 于 选择 锚 中 的 特定 域 。 下 面 的 示例 用 它 突 出 显示 链接 到 某 个 人 微 博 账户 的 锚 ， 结 果 如 
图 8-6 所 示 。 
alhref*="twitter"] { 
background-url(img/twitter.png) 100% 50% no-repeat; 


Miss Baker and Able's journey gripped the world's imagination. Appearing on the June 15, 1959 
cover of Life magazine " the pair joined a growing list of women celebrities to grace the 
magazine's cover in 1959, a list which included Marilyn Monroe [3, Zsa Zsa Gabor [3 and Jackie 
Kennedy B. 


图 8-6 ”使 用 * 特 性 子 串 选择 器 给 微 博 账户 链接 设置 样式 


使 用 ^ 操 作 符 和 值 http://twitter.com 可 以 得 到 相同 的 结果 ， 但 使 用 * 操 作 符 可 以 节省 一 些 字 节 。 
根据 微 博 地 址 (例如 http://twitter.com/ZsaZsa) 给 某 个 微 博 链接 设置 不 同 的 样式 时 , * 子 串 选 择 器 就 会 表 
现 出 其 真正 强大 的 功能 。 为 了 简明 起 见 ， 所 有 的 链接 都 包含 twitter， 如 前 面 的 示例 所 示 ， 但 只 有 一 
个 链接 包含 ZsaZsa: 

afhref*="ZsaZsa"] { 

‘background:url(img/twitter.png) 100% 50% no-repeat: 
color-#fF0; 

} 

使 用 * 操 作 符 和 XEFN 微 格式 还 可 以 表示 我 们 与 朋友 、 家 人 和 其 他 人 的 关系 状态 。 例 如 ， 如 果 希 
望 表 示 Marilyn Monroe 是 我 们 的 甜心 ， 标 记 就 应 如 下 所 示 : 

<a href="http://twitter.com/marilynmonroe" rel="met sweetheart friend">Marilyn Monroe</a> 

rel 特性 有 3 个 值 ， 所 以 很 难 使 用 人 ^ 或 8 操作 符 来 选择 ， 因 此 *( 包 含 ) 就 是 一 种 选择 , 与 CSS2.1 的 
波浪 字符 (~) 一 样 ，~ 也 可 以 用 于 这 种 情形 ， 因 为 值 是 用 空白 分 隔 的 。 对 于 这 个 示例 ， 我 们 使 用 新 的 
CSS3 子 串 选 择 器 *: 
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alrel*="sweetheart"] { 
background-url(img/sweetheart.png) 100% 50% no-repeat: 


} 

现在 ，Marilyn Monroe 就 是 我 们 的 甜心 ， 如 图 8-7 所 示 。 
Miss Baker and Able'sjourney gripped the world's imagination. Appearing on the June 15, 1959 
cover of Life magazine " the pair joined a growing list of women celebrities to grace the 


magazine's cover in 1959, a list which included Marilyn Monroe 乌 , Zsa Zsa Gabor 问 and Jackie 
Kennedy 回 . 


图 8-7 ”使 用 * 特 性 子 串 选择 器 设置 甜心 关系 的 样式 
但 此 时 可 能 有 一 个 问题 : Marilyn 的 微 博 图 标 消失 了 。 这 是 因为 两 个 样式 规则 有 相同 的 级 别 , alrel 
* 二 "sweetheart"] {...} 规 则 在 样式 表 的 底部 。 要 解决 这 个 问题 ， 可 以 给 sweetheart 规则 添加 一 些 额外 
的 空白 ,使 用 多 张 背 景 图 像 ， 把 两 个 图 标 放 在 不 同 的 位 置 。 


alrel*="sweetheart"] { 


url(img/sweetheart.png) 100% 50% no-repeat, 
url(img/twitter.png) 85% 50% no-repeat; 
} 


8.3.3 ”UI 元 素 状态 伪 类 


大 多 数 窗 体 元 素 都 可 以 启用 、 禁 用 或 选中 。 使 用 UI 元 素 状态 伪 类 ， 可 以 在 这 些 元 素 处 于 特定 
状态 时 选择 它们 , 例如 选中 的 复 选 框 。 下 面 介绍 基本 的 登录 窗 体 , 看 看 如 何 实现 这 些 元 素 状态 伪 类 。 
图 8-8 显示 的 登录 窗 体 处 于 正常 状态 。 


图 8-8 ”处 于 正常 状态 的 登录 窗 体 
现在 假定 用 户 名 、 密 码 字 段 和 登录 按钮 都 被 禁用 了 。HIML 标记 如 下 所 示 ， 其 中 的 disabled 特 
性 在 需要 时 应 用 。 


<form action= "> 

<fieldset> 

<legend>Login</legend> 

<label for="uname">Usemame 

<input type="text" id="uname" placeholder="e.g. hello@webevolved.com" disabled /> 
</label> 


<label for="password">Password 
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<input type="password" id="password" disabled /> 
Nabel> 


<input type="checkbox" id="rememberme" checked disabled /> 

<label for="rememberme">Remember me</label> 

<input type="submit" value="Login" id="login" disabled /> 

</fieldset> 

</form> 

现在 需要 给 字段 设置 样式 ， 以 说 明 它 们 是 被 禁用 的 。 要 给 这 些 状态 设置 样式 ， 可 以 在 需要 它们 
的 元 素 (这 里 是 所 有 的 <input> 元 素 ) 上 使 用 :disabled 伪 类 。 


前 面 把 禁用 字段 和 按钮 的 背景 色 设置 为 灰色 ， 使 它们 看 起 来 不 是 “激活 的 ”或 可 单 击 的 ， 如 
图 8-9 的 右 图 所 示 。 


图 8-9 使 用 :disabled、:enabled 和 :checked UI 元 素 状态 伪 类 


:checked 和 :enabled 伪 类 的 工作 方式 相同 。 从 图 8-9 左边 的 窗 体 可 以 看 出 ， 复 选 框 旁边 的 
“Remember me ”标签 (使 用 相 邻 同 级 组 合 器 ) 是 突出 显示 的 ， 我 们 还 使 用 不 同 的 边框 颜色 突出 显示 了 
启用 的 字段 (使 用 特性 选择 器 确保 较 高 的 级 别 )。 

input[type="checkbox"]:checked + label { 

display:inline; 
background: #F9FDA2: 

} 

input[type="text"]:enabled, inputltype="password"]:enabled { 

border: 1px solid #75aadb; 

} 

这 些 UI 元素 状态 伪 类 是 可 切换 的 (选中 /未 选中 )， 当 激活 状态 时 ,就 应 用 它们 。 使 用 它们 可 以 给 
用 户 提供 有 用 的 可 视 化 反馈 ， 提 升 站 点 用 户 的 体验 ， 并 且 不 需要 花费 太 多 的 精力 。 

另外 , 在 选择 器 模块 的 外 部 , 还 有 另 一 个 包含 伪 类 的 模块 , 就 是 CSS Basic User Interface Module 
Level 3。 在 这 个 模块 中 ， 有 一 些 UI 状态 伪 类 类 似 于 上 述 伪 类 ， 它 们 是 : 


default 必需 
valid 可 选 
invalid 只 读 
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in-range 读 / 写 
out-of-range 


这 些 伪 类 与 HTMLS5 窗 体 一 起 使 用 时 非常 有 用 ， 浏 览 器 支持 情况 类 似 于 CSS3 选择 器 。 
8.3.4 :target 伪 类 


CSS3 引入 了 新 的 :target 伪 类 .在 选中 的 元 素 成 为 链接 的 活动 目标 (指向 它 的 URL 的 片段 标识 符 ) 
时 ， 就 可 以 使 用 :target。 片 段 标识 符 在 页 面 的 特定 元 素 (例如 #Hlighb 上 称 为 锚 或 卫 。 单 击 以 片段 标识 
符 结尾 的 链接 时 ， 链 接 指向 的 元 素 就 成 为 :target。 

给 :target 指定 样式 的 方式 与 :hover 或 :focus 相同 。 具 体 示 例 非常 多 ， 比 如 FAQ 的 简单 列表 、 目 
录 页 面 、 页 内 导航 和 脚注 。 

下 面 的 示例 突出 显示 了 页 内 导航 中 链接 的 页 面部 分 。 这 是 页 面 的 基本 标记 : 


<div> 
<section id="flight"> 
<h1>Miss Bakers Historic Flight</h1> 


</section> 
<section id="mission"> 

<hl>The Mission</h1> 
</section> 
<aside> 

<hl>The US Space Program</hl> 
</aside> 


<hl>Life in Retirement</hl> 


</section> 
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注意 每 个 <section> 和 <div> 元 素 都 有 自己 的 ID。 接 着 在 <nav> 中 给 这 些 ID 添加 对 应 的 锚 。 这 就 
提供 了 使 用 :target 所 需 的 片段 标识 符 (ID)。 

下 面 添加 一 条 规则 , 在 导航 中 单 击 时 , 突出 显示 对 应 的 部 分 。 将 :target 添加 给 带 D( 片 段 标 识 符 ) 
的 元 素 而 不 是 锚 。 因 为 有 两 种 带 片段 标识 符 的 元 素 ， 所 以 给 选择 器 分 组 ， 以 便 给 <section> 和 <div> 
元 素 分 别 添加 规则 : 

section:target, div:target { 

background: #F9FDA2; 

} 

图 8-10 显示 了 单 击 锚 时 突出 显示 的 部 分 。 为 了 更 进一步 ， 可 以 使 用 CSS 动画 使 背景 色 连 续 
变化 。 


Miss Bakers Historic Flight 


图 8-10 ”使 用 :target 伪 类 突出 显示 的 部 分 


当然 ， 给 所 有 类 型 的 元 素 应 用 :target 是 非常 麻烦 的 ， 但 可 以 使 用 通用 选择 器 (9) 解 决 这 个 问题 ， 
如 下 面 的 代码 所 示 。 但 是 使 用 * 选 择 器 对 站 点 性 能 有 负面 影响 ， 所 以 应 小 心 使 用 。 
:target { 
background: #F9FDA2; 
} 
给 CSS 添加 一 条 简单 的 规则 ， 可 以 帮助 用 户 弄 清楚 在 通过 页 内 链接 导航 时 ， 他 们 处 在 文档 的 什 
么 位 置 。 
另 一 个 例子 是 创建 一 个 基本 的 、 只 有 CSS 的 选项 卡 界面 ， 类 似 于 使 用 :target 和 JavaScript 创建 
的 界面 。 下 面 是 带 选 项 卡 的 面板 和 相关 导航 功能 的 简化 标记 : 
<article> 
<hl>Features</hl> 
<a href="#s-one">One</a> | <a href="#s-two">Two</a> | <a href="#s-three">Three</a> | <a href="#s-four">Four</a> 
<div> 
<section id="s-one"> 
<hl>Section One</hl> 
<p>Lorem ipsum dolor set amet.</p> 
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</section> 
<section id="s-two"> 
<hl>Section Two<hl> 


<section id="s-four"> 
<hl>Section Four</h1> 
<p>Lorem ipsum dolor set amet.</p> 
</section> 
<ldiv> 
</article> 
带 选项 卡 的 区 域 放 在 <article> 中 ， 再 包含 在 导航 链接 中 ， 之 后 是 一 个 <div>( 用 于 指定 样式 ) 和 几 
个 <section>， 每 个 <section> 都 有 唯一 的 D， 每 个 锚 都 被 链接 到 唯一 的 人 D。 注 意 这 里 没有 使 用 <nav> 
标记 ， 也 没有 把 导航 项 放 在 列表 中 。 
现在 把 基本 的 样式 应 用 于 article、div 和 section, 指定 它们 的 绝对 位 置 , 用 作 选 项 卡 的 内 容 区 域 。 
article, div { 
position:relative; 


} 


Section { 


} 
下 一 步 是 激活 :target 伪 类 。 我 们 要 把 它 应 用 于 每 个 section， 修改 z-index 属性 ， 使 该 部 分 显示 在 
其 他 部 分 的 上 面 。 注 意 ，:target 被 应 用 于 带 片段 标识 符 (而 不 是 锚 ) 的 元 素 。 因 为 这 个 示例 很 简单 ， 所 
以 可 以 创建 一 条 规则 ， 以 选择 文档 中 的 所 有 部 分 。 
Section:target { 
z-index:2; 
} 
为 了 确保 第 一 个 选项 卡 在 页 面 初次 加 载 时 可 见 ， 使 用 :first-of-type 选择 器 ,修改 其 z-index 属性 : 
section:target, 
section:first-of-type { 
z-index:2: 
. 


这 会 提供 一 个 基本 的 、 仅 包含 CSS 的 选项 卡 切换 器 。 下 一 步 是 以 某 种 方式 使 活动 的 选项 卡 突出 
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显示 。 为 此 ， 需 要 在 标记 中 选中 section 上 面 的 锚 。 在 本 例 中 ，section 是 外 部 div 的 子 元 素 ，div 是 
锚 的 同 级 元 素 。 这 就 存在 一 个 问题 : 只 使 用 CSS， 无 法 选中 父 元 素 ， 因 为 CSS 本 质 上 是 “级 联 的 ”。 
而 突出 显示 激活 的 选项 卡 需要 父 元 素 。 为 了 解决 这 个 问题 ， 需 要 给 每 个 错 添 加 IDP， 如 下 所 示 ; 
<a href="#one" id="one">One</a> | <a href="#two" id="two">Two</a> | <a href="#three" id="three">Three</a> | <a 
href="#four" id="four">Four</a> 
接着 给 锚 应 用 :target， 设 置 活动 状态 : 
artarget { 
background:#f5f5f5: 
font-weight:bold; 
} 
这 解决 了 活动 选项 卡 的 问题 ， 但 破坏 了 带 选 项 卡 的 面板 ， 其 中 的 选项 卡 不 能 再 切换 了 。 为 了 解 
决 这 个 问题 ， 使 用 子 串 选 择 器 和 邻近 同 级 组 合 器 来 选择 每 个 section。 
#one:target ~ div > section#s-one, 
#two:target ~ div > section#s-two, 
#three:target ~ div > section#s-three, 
#four:target ~ div > section#is-four, 
section:first-of-type { 
z-index:2; 
} 
规则 是 选中 每 个 section 元 素 , 这些 section 元 素 是 div 元 素 的 子 元 素 (使 用 > 操作 符 ), 而 div 是 标 
记 中 锚 的 邻近 元 素 (使 用 ~ 操作 符 )。 还 包含 默认 的 section:first-of-type 规则 ， 确 保 在 页 面 加 载 时 突出 
显示 第 一 个 section。 因 为 不 能 使 用 CSS 选择 父 元 素 ， 所 以 不 能 把 锚 放 在 ul 或 nav 元 素 中 。 如 果 以 
这 种 方式 编写 标记 ， 就 表示 上 述 规则 不 能 实现 。 所 以 ， 这 里 使 用 CSS3 的 :target 伪 类 建立 一 个 简单 
的 、 带 选项 卡 的 界面 ， 如 图 8-11 所 示 。 


One | Two | Three | Four 


图 8-11 使 用 CSS3 的 :target 伪 类 建立 带 选项 卡 的 界面 


8.3.5 ”结构 伪 类 


前 面 介绍 了 几 个 伪 类 : :target 和 UI 元 素 状态 伪 类 。 下 面 看 看 功能 超级 强大 的 结构 伪 类 。 这 些 选 
择 器 允许 给 DOM 中 的 元 素 或 元 素 的 某 些 部 分 设置 样式 , 但 如 果 不 添加 了 D 或 类 , 这 些 元 素 或 元 素 的 
某 些 部 分 就 不 能 使 用 其 他 选择 器 选择 。 最 初 使 用 它们 是 为 了 尽 可 能 减少 在 标记 中 添加 额外 的 类 ， 包 
括 在 源 代码 中 添加 的 类 和 使 用 JavaScript 库 ( 如 jQuery) 动态 添加 的 类 。 
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只 有 一 个 结构 伪 类 不 是 在 CSS3 中 引入 的 ， 但 在 此 也 会 介绍 这 个 在 CSS2.1 中 引入 的 结构 伪 
类 :first-child。 下 面 就 开始 介绍 结构 伪 类 。 


1. :first-child 


你 可 能 给 列表 中 的 第 一 项 或 帖子 中 的 第 一 段 添加 了 first 类 ， 但 在 此 将 介绍 如 何 避 免 这 么 做 。 顾 
名 思 义 ，:first-child 允许 在 文档 树 中 选择 给 定 元 素 的 第 一 个 子 元 素 。 
以 本 章 前 面 的 示例 页 面 为 例 ， 假 定 要 对 引言 中 的 第 一 段 文字 增 大 字号 ， 加 粗 字 体 。 为 此 ， 可 以 
在 了 D 为 introduction 的 div 中， 给 段落 使 用 :first-child 伪 类 。 
div#introduction p:first-child { 
font-size: 18px; 
font-weight:bold:; 
} 
图 8-12 显示 了 结果 。 


图 8-12 ”使 用 :first-child 伪 类 对 第 一 段 文字 增 大 字号 


注意 : 

在 Intemet Explorer 7 中 ，:first-child 会 产生 一 个 非常 奇怪 的 错误 。 如 果 将 一 个 注释 放 在 要 选择 的 
第 一 个 元 素 的 前 面 ，IE7 就 会 将 这 个 注释 看 作 第 一 个 子 元 素 ， 因 此 不 会 将 规则 应 用 于 要 选择 的 元 素 。 
解决 方法 就 是 移动 注释 。 


2. :last-child 


这 个 选择 器 有 助 于 选择 最 后 一 个 子 元 素 ， 它 也 是 第 一 个 CSS3 伪 类 。 图 8-13 显示 了 一 个 示例 导 
航 菜单 ， 其 中 的 每 一 项 都 有 右边 框 。 
使 用 :last-child 可 以 删除 最 后 一 个 列表 项 的 右边 框 ， 如 下 所 示 : 
nav lilast-child { 
border-right:0: 
水 


在 图 8-14 中 可 以 看 出 ， 最 后 一 个 列表 项 的 右边 框 被 删除 了 。 


Introduction Flight Mission Retirement Introduction Flight Mission Retirement 


8-13 ”导航 菜单 的 每 一 项 都 有 右边 框 图 8-14 ”导航 菜单 中 最 后 一 项 的 右边 框 被 删除 了 
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3. :nth-child 


:nth-child 伪 类 使 事情 开始 变 得 复杂 起 来 ， 因 为 需要 先 使 用 数学 知识 。 

:nth-child 伪 类 允许 选择 给 定 父 元 素 的 一 个 或 多 个 特定 的 子 元 素 。 它 可 以 将 数字 (整数 )、 关 键 字 
(odd 或 even) 或 计算 式 (表达 式 ) 作 为 参数 。 给 图 8-15 所 示 的 HTML 数 据 表 设 置 样式 时 ， 使 用 :nth-child 
非常 方便 。 

首先 使 用 关键 字 even， 给 表 中 的 偶数 行 添加 背景 色 ， 创 建 斑马 纹 效 果 。 

tr:nth-child(even) td { 

background-color-#eee; 


} 
图 8-16 显示 了 带 斑马 纹 效果 的 HIML 数据 表 。 


Fru Flies N/A 
Rlsos Monikey Albert 
Mouse N/A 


Do Tiyan & peak 
Dog La 


a 


图 8-15 带 简单 样式 的 HTML 数据 表 图 8-16 使 用 :nth-child 添加 了 斑马 纹 效果 的 HTML 数据 表 
对 于 前 面 的 示例 ， 使 用 表达 式 2n 或 2n+0( 含 义 是 “每 隔 一 行 指定 样式 ”) 也 能 实现 相同 的 效果 。 
trnth-child(2n) td { 
background-color:#eee; 
} 


如 果 和 希望 颠倒 该 效果 , 将 背景 色 应 用 于 奇数 行 , 就 可 以 使 用 odd 关键 字 或 表达 式 2n+1, 表示 “从 
第 一 行 开始 ， 每 隔 一 行 指定 样式 ”。 下 面 的 示例 能 产生 相同 的 效果 : 
trnth-child(odd)td { 
background-color:#tkeee: 
} 
trnth-child(2n+1) td { 
background-color-#eee: 
} 
下 面 增加 一 点 复杂 性 。 使 用 与 前 面 类 似 的 表达 式 ， 假 定 要 每 隔 三 行 选择 一 行 数据 ， 可 以 使 用 如 
下 代码 : 


trnth-child(4nytd { 
background-color#keee: 
} 
如 果 从 第 二 行 开 始 ， 每 隔 三 行 选择 一 行 数据 ， 该 怎么 办 ? 
tr:nth-child(4n+2) td { 
background-color-#eee: 
} 
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可 以 看 出 这 里 有 一 种 模式 。 下 面 要 选 出 班级 中 希望 从 后 往 前 数 数 的 聪明 孩子 。 假 定 要 给 表 中 的 
前 5 行 设置 样式 。 为 此 ， 可 以 给 n 使 用 负 值 : 


tr:nth-child(-n+5) td { 
background-color-#eee; 


} 
4. :nth-last-child 


使 用 尽 可 能 少 的 标记 设置 样式 的 另 一 个 选项 是 :nth-last-child 伪 类 ， 它 与 :nth-child 基本 相同 , 但 
从 最 后 一 个 元 素 开 始 计数 。 使 用 与 前 面 示例 相同 的 表达 式 , 会 突出 显示 表 中 的 最 后 5 行 数据 。 注意， 
前 面 的 示例 会 突出 显示 表 中 的 前 5 行 数据 。 
tr:nth-last-child(-n+5) td { 
background-color:#eee; 
} 
与 :nth-child 相同 ，:nth-last-child 也 接收 odd 和 even 参数 ， 不 一 定 要 给 n 赋予 负 值 。 


5. :only-child 


还 有 一 个 “ 子 元 素 ” 伪 类 :only-child， 它 会 选择 出 父 元 素 的 唯一 子 元 素 。 如 果 一 个 动态 生成 的 列 
表 只 包含 一 项 ， 使 用 它 就 很 方便 ， 此 时 可 以 减少 空白 。 

ul lizonly-child { 

} 


6. :first-of-type 


“类 型 ” 伪 类 的 工作 方式 与 “ 子 元 素 ” 伪 类 相同 ， 关 键 区 别 在 于 “类 型 ” 伪 类 只 选择 与 应 用 了 选 
择 器 的 元 素 相同 类 型 的 元 素 。 不 能 保证 没有 不 同 的 子 元 素 时 ， 就 可 以 使 用 “类 型 ” 伪 类 。 例 如 ， 如 
果 把 <hr> 放 在 段落 之 间 ， 使 用 :first-of-type 就 可 以 确保 只 选择 段落 。 
以 前 面 的 :first-child 示例 为 例 ， 可 以 把 <div id="introduction"> 用 作 样 式 关联 。 使 用 :first-of-type， 
可 以 编写 如 下 代码 : 
diviintroduction p:first-of-type { 
font-size:18px: 
} 
为 了 增加 趣味 性 ， 可 以 组 合 使 用 :firstoftype 和 CSS1 中 的 ::first-letter 伪 元 素 ， 给 引言 中 第 一 段 
的 第 一 个 字母 设置 样式 ， 如 图 8-17 所 示 。CSS3 给 伪 元 素 引 入 了 新 的 双 冒 号 语法 (3)， 以 区 分 它们 和 
伪 类 (如 :hover)。 下 面 是 双 冒 号 语法 示例 : 
diviintroduction p:first-of-type::first-letter { 
font-size:60px:; 
floatleft: 
height:SOpx: 
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line-height:1; 
margin-right:Spx; 
Be 
Pb] et 
8-17 使 用 CSS 伪 选 择 器 给 第 一 段 的 第 一 个 字母 设置 样式 
7. :last-of-type 


与 :first-of-type 一 样 ， 使 用 :last-of-type 也 可 以 实现 与 :last-child 相同 的 效果 。 要 删除 最 后 一 个 菜 
单项 的 右边 框 ， 可 以 使 用 如 下 代码 : 


nav li:last-of-type { 
border-right:0; 
} 


8. :nth-of-type 


:nth-of type 的 工作 方式 与 :nth-child 相同 ， 使 用 的 语法 也 相同 。 但 是 ， 如 果 在 要 选择 的 元 素 之 间 
有 其 他 元 素 ，:nth-of-type 就 比 :nth-child 更 有 效 。 在 下 面 的 示例 中 ，section 有 一 个 标题 ， 其 后 是 动物 
图 片 列表 : 

<section id="animals"> 

<hl>Animals in Space</h1> 

<u> 

<li><img src="img/albertpng" alt="Albert IT' /></li> 
<li><img src="img/tsygan.png" alt="Tsygan" /></li> 
<H><img sre="img/laika.png" alt="Laika" /></li> 

<li><img sre="img/gordo .png"” alt="Gordo" /></li> 
<H><img sre="img/baker.png" alt="Miss Baker" /></li> 
<li><img sre="img/belka.png" alt="Belka & Strelka" /></li> 
<li><img src="img/enos.png" alt="Enos" /></li> 

<li><img sre="img /felix.png" alt="Felix" /></li> 

<ul> 

</section> 

现在 ， 删 除 列表 创建 的 项 目 符号 ， 使 每 个 列表 项 浮动 起 来 ， 再 添加 一 些 页 边 距 。 

#animals ul { 

list-style-type:none; 
} 
#animals li { 
float:left: 
margin-right:2em: 
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图 8-18 显示 了 效果 ， 可 以 看 出 ， 页 边 距 使 第 三 个 列表 项 移动 到 新 行 。 问 题 在 于 该 设计 要 求 每 一 
行 应 有 三 幅 图 像 。 
:nth-oftype 的 新 用 法 是 ， 每 隔 两 个 列表 项 选择 一 个 列表 项 (3n)， 删 除 其 右边 的 页 边 距 ， 确 保 它 
不 会 显示 到 下 一 行 上 。 效 果 如 图 8-19 所 示 。 
fkanimals linth-of-type(3n) { 
margin-right:0; 


} 


Animals in Space 
Animals in Space 
月 


图 8-18 动物 图 片 列 表 图 8-19 动物 图 片 列 表 ， 每 一 行 有 三 张 动物 图 片 
与 :nth-child 相同 ， 也 可 以 使 用 表达 式 (2n+1) 或 关键 字 (odd 或 even) 来 选择 特定 的 元 素 。 
还 可 以 使 用 :nth-of-type 和 表达 式 linth-oftype(){..} 选 择 组 中 的 第 一 项 , 效果 与 使 用 :first-of-type 
相同 。 


光合 
唤 因 瞄 


NS 
ke 


9. :nth-last-of-type 


使 用 :nth-last-of-type(1) {.…} 与 使 用 :last-of-type 相同 ， 但 将 :nth-lastof-type 与 表达 式 一 起 使 用 ， 可 
以 从 最 后 一 项 向 前 数 ， 与 :nth-last-child 类 似 。 以 nth-of-type 示例 为 例 ， 添 加 很 大 的 左 页 边 距 ， 会 将 
最 后 一 张 动物 图 片 移 到 中 间 ， 如 图 8-20 所 示 。 

#animals linth-last-of-type(1) { 

margin-left:232px: 
} 


10. :only-of-type 


:only-of-type 选择 父 元 素 中 的 子 元 素 ,在 父 元 素 中 , 不 再 有 这 种 类 型 的 其 他 子 元 素 。 一 篇 文章 可 
能 包含 几 张 图 片 , 但 如 果 只 包含 一 张 图 片 ,就 希望 用 另 一 种 方式 来 处 理 , 例如 使 其 显示 完整 的 宽度 。 
此 时 就 可 以 使 用 :only-of-type。 


aticle img:only-of-type { 
Width:100%; 
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Animals in Space 


图 8-20 动物 图 片 列表 ， 最 后 一 张 动物 图 片 居中 


11. :empty 

:empty 是 一 个 非常 有 用 的 伪 类 ， 它 表示 没有 内 容 的 元 素 。 假 定 页 面 上 有 一 个 动态 生成 的 、 没 有 
内 容 的 aside， 就 可 以 使 用 :empty 隐藏 它 : 

aside:empty { 

display:none; 

} 

注意 : 

如 果 浏 览 器 在 元 素 中 发 现 了 字符 ， 甚 至 只 是 发 现 了 空白 ， 就 会 显示 该 元 素 ， 因 为 它 已 不 再 正确 
匹配 :empty 选择 器 。 可 以 在 标记 中 添加 HTML 注释 ， 但 要 确保 元 素 中 没有 空白 。 

12. :root 

不 能 忽略 的 一 个 结构 伪 类 是 :root。 在 HIML 中 , 文档 的 根 总 是 <html> 元 素 ， 这 就 是 :root 选择 的 
元 素 。:root 的 工作 方式 如 下 : 


:root { 
background-color:red: 
} 


8.3.6” 伪 元 素 


前 面 简 要 介绍 了 ::first-letter 伪 元 素 , CSS3 给 伪 元 素 引 入 了 新 的 双 冒 号 语法 (::), 以 区 分 它们 和 伪 
类 。 这 种 新 语法 被 应 用 于 CSS1 和 CSS2 中 的 如 下 伪 元 素 : 


:first-letter CZ ::first-line :before  ::after 


1. ::before 和 ::after 


::before 和 ::after 伪 元 素 用 于 在 元 素 的 内 容 (或 另 一 个 伪 元 素 ) 之 前 或 之 后 生成 内 容 。 其 中 ，“ 在 
元 素 的 内 容 之 后 "很 重要 。 这 意味 着 对 于 有 空 内 容 模式 的 元 素 ,例如 <img> 或 <input>, 不 能 使 用 ::before 
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和 ::after。 
:before 和 ::after 有 许多 符合 规则 的 用 例 , 如 下 所 示 。 为 这 些 伪 元 素 生成 的 内 容 由 content 属性 提 
供 ， 它 可 以 带 有 如 下 一 个 或 多 个 值 。 
字符 串 : 文本 内 容 。 
URI: 外 部 资源 (如 图 像 ) 的 URI。 
计数 器 :自动 生成 元 素 的 编号 。 
特性 值 ， 带 有 指定 特性 值 的 字符 串 。 
左右 引号 : 值 用 引号 属性 中 指定 的 字符 串 蔡 代 。 
无 左右 引号 : 没有 引入 内 容 ， 但 增加 了 霸 套 层 数 。 
下 面 先 添加 字符 串 。 要 在 每 个 <figcaption> 元 素 之 前 插入 “Figure:”， 可 以 编写 如 下 代码 : 
figcaption::before { 
Content:"Figure:"; 
} 
字符 串 必须 用 引号 括 起 来 。 也 可 以 包含 Unicode 字符 ， 这 些 字符 必须 用 反 和 斜 杠 Q) 转 义 。 在 下 面 
的 示例 中 ， 要 在 返回 页 面 项 部 的 链接 末尾 添加 一 个 向 上 箭头 (Unicode 2191)。HTML 代码 段 如 下 : 
<p><a href="#top">Back to top</a></p> 
使 用 ::after 伪 元 素 添加 箭头 的 CSS 规则 如 下 ， 如 图 8-21 所 示 ， 它 使 用 特性 选择 器 只 选择 带 #top 
href 的 锚 : 


a[hreE-"#top"]:after{ 
content:" \2191"; 


} 


Back to top 1 


图 8-21 在 元 素 的 内 容 之 后 添加 一 个 箭头 符号 


下 面 使 用 content 属性 追加 一 个 特性 值 。 这 个 示例 显示 锚 获 得 焦点 (或 鼠标 悬 停 在 锚 上 ) 时 链接 的 
URL。 只 有 外 部 链接 才 有 这 个 效果 ， 所 以 使 用 本 章 前 面 介绍 的 ^ 子 串 特性 选择 器 。 


a[href'= "http://"]:hover::after, a[href"="http://"]:focus::after { 
content:attr(href); 
position:absolute: 
bottom:-22px: 
left:0; 
Padding:0 Spx: 
Color-#ffE: 


} 
前 面 使 用 content 属性 和 带 href 参数 的 attr 值 。 接 着 将 内 容 放 在 链接 的 下 面 。 
最 后 ， 为 了 说 明 如 何 组 合 几 个 值 ， 添 加 一 个 字符 串 (“Extemal Link”) 和 href 特性 : 


afhref"="http://"]:hover::after, afhref"="http:/"]:focus::after { 
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} 
2. 进一步 研究 伪 元 素 


伪 元 素 的 潜能 很 大 ， 范 围 也 很 广 ， 包 括 页 面 翻 卷 、 自 动 给 各 部 分 或 各 章 编 号 等 。 甚 至 可 以 在 打 
印 的 样式 表 中 包含 URL。 支 持 伪 元 素 的 浏览 器 在 增加 ， 尽 管 从 CSS 2.1 才 开 始 支持 ， 但 它 有 助 于 删 
除 那些 用 于 设置 样式 的 不 必要 的 div。 


8.3.7 ”否定 伪 类 


最 后 要 介绍 的 选择 器 是 否定 伪 类 :not0。 在 许多 方面 ， 它 的 工作 方式 与 其 他 选择 器 相反 ， 因 为 它 
允许 选择 不 匹配 选择 器 的 参数 的 元 素 ， 但 实用 性 是 相同 的 一 一 可 能 会 越 来 越 多 地 使 用 它 。 
一 个 主要 示例 是 给 不 是 Submit 按钮 的 所 有 窗 体 输入 设置 样式 : 
input:not([type="submit"]) { 
width:250px; 
border: 1px solid #333;} 
这 样 就 不 需要 给 Submit 按钮 添加 一 个 额外 的 类 来 设置 样式 了 。 从 另 一 个 角度 看 , 不 需要 给 所 有 
其 他 的 <input> 元 素 添加 类 。 标 记 看 起 来 很 少 。 
还 可 以 在 测试 过 程 中 使 用 否定 伪 类 捕获 验证 功能 没有 捕获 的 部 分 。 例 如 ， 如 果 和 希望 看 到 所 有 未 
指定 tite 特性 的 缩写 词 ， 只 需要 使 用 如 下 代码 : 
abbr:not([title]) { 
outline:2px dotted red: 
} 
图 8-22 显示 了 使 用 :not0 伪 类 显示 的 虚 点 线 。 
Miss Baker's journey lasted 15 minutes and reached speeds of up to 10,000 MPH. Baker and 
Able were weightless for nine minutes. AINASA:spokesperson stated that the monkeys were in 


“perfect condition” on their return to earth. Indeed Miss Baker went on to live a long and 
fruitful life, living until 1984. 


图 8-22 使 用 否定 伪 类 给 没有 tite 特性 的 <abbr> 元 素 设置 样式 
可 以 使 用 相同 的 技术 突出 显示 没有 指定 alt 特性 的 图 像 : 


img:not([alt) { 
outline:2px dotted red: 
} 
在 测试 过 程 中 可 以 添加 诊断 CSS 来 捕获 和 改正 所 有 这 些 错误 。 准 备 部 署 到 站 点 上 时 ， 只 需要 删 
除 文件 即 可 。 
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要 浏览 器 支持 


CSS3 选择 器 在 IE9+、Firefox 3.5+、Chrome 4+、Safari 4+ 和 Opera 10+ 中 获得 了 完全 支持 。IE6、 
正 7 和 正 8 不 支持 CSS3 选择 器 ， 正 7 和 IE8 支持 一 般 同 级 组 合 器 、:first-child 和 所 有 特性 选择 器 ， 
但 使 用 内 置 的 JavaScript 或 jQuery 库 编 写 填充 物 程序 ,就 可 以 解决 这 个 问题 .对 于 Internet Explorer， 
给 选择 器 分 组 ， 如 果 正 遇 到 一 个 它 不 理解 的 选择 器 ， 它 就 会 忽略 整 条 规则 。 例 如 : 
ul linth-child(3n), ul lilast { 
margin-right: 0; 
} 
正 就 不 会 识别 这 条 规则 ， 所 以 需要 将 它们 拆 分 为 多 条 规则 ， 如 下 所 示 : 
ul linth-child(3n) { 
margin-right: 0; 
} 
ullilast { 
margin-right: 0; 
} 


EEG 应 用 实例 


图 8-23 “CSS 的 简单 应 用 效果 


1. 实例 分 析 


(1) 设置 页 面 宽度 和 居中 。 

(2) 设置 标题 和 作者 居中 。 

(3) 设置 图 像 大 小 。 

(4) 控制 段落 文字 大 小 、 行 高 和 首 行 缩 进 。 
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(5) 对 第 一 行 的 第 一 个 字符 进行 首 字 下 沉 。 
(6) 文字 选中 后 表现 为 黑 底 白字 。 
(7) 红色 文字 部 分 的 实现 。 


2. HTML 代码 


<!DOCTYPE html> 
<html> 
<head> 
<title>CSS 的 简单 应 用 </tide> 
<link href="css8-13.css" rel="stylesheet" type="texticss" /> 
</head> 
<body> 
<hl> 桃 花 源 记 <hl> 
<h2> 作 者 :陶渊明 </h2> 
<p class="firstpara"> 晋 太 元 中 ， 武 陵 人 捕 鱼 为 业 。 缘 溪 行 ， 忘 路 之 远近 。 忽 逢 桃花 林 ， 夹 岸 数 百 步 ， 中 无 杂 树 ， 芳 草 
鲜美 ， 落 英 缤纷 ， 渔 人 甚 异 之 。 复 前 行 ， 欲 穷 其 林 。</p> 
<p> 林 尽 水 源 ， 便 得 一 山 ， 山 有 小 口 ， 仿 佛 若 有 光 。 便 舍 船 ， 从 口 入 。 初 极 狂 ， 才 通 人 。 复 行 数 十 步 ， 种 然 开朗 。 土 
地 平 旷 ， 屋 合作 然 ， 有 良田 美 池 桑 竹 之 属 。 陡 陌 交通 ， 鸡 犬 相 闻 。 其 中 往来 种 作 ， 男 女 衣 着 ， 悉 如 外 人 。 黄 发 季 轿 ， 并 怡然 
自 乐 。<p> 
<p> 见 渔 人 ， 乃 大 惊 ， 问 所 从 来 。 具 答 之 。 便 要 还 家 ， 设 酒 杀 鸡 作 食 。 村 中 闻 有 此 人 ， 咸 来 问讯 。 自 云 先 世 避 秦 时 乱 ， 
率 妻 子 邑人 来 此 绝境 ， 不 复出 焉 ， 遂 与 外 人 间隔 。 问 今 是 何 世 ， 乃 不 知 有 汉 ， 无 论 魏 晋 。 此 人 一 一 为 具 言 所 闻 ， 和 皆 叹 忱 。 余 
人 各 复 延 至 其 家 ， 沸 出 酒 食 。 停 数 日 ， 辞 去 。 此 中 人 语 云 ， “不 足 为 外 人 道 也 。”<br 亡 
<span>( 间 隔 一 作 : 隔绝 )</span> 
<p> 
<p> 既 出 ， 得 其 船 ， 便 扶 向 路 ， 处 处 志 之 。 及 郡 下 ， 齐 太守 ， 说 如 此 。 太 守 即 遗 人 随 其 往 ， 寻 向 所 志 ， 遂 迷 ， 不 复 得 
路 。</p> 
<p> 南 阳 刘 子 驴 ， 高 尚 土 也 ， 闻 之 ， 欣 然 规 往 。 未 果 ， 寻 病 终 ， 后 遂 无 问津 者 。<p> 
<img src="images/garden jpg” class="pic" /> 


</div> 

</body> 

</html> 

3.CSS 代码 

body{ 
text-align:center; 已 居中 对 齐 */ 

} 

#container{ 
width:720px: 放宽 度 */ 
margin:0 auto; 族 外 边 距 */ 

i 

p{ 
text-align:left: 已 左 对 齐 */ 
textindent2em /# 首 行 缩 进 2 个 字符 */ 
font-size:13px: A 字体 大 小 */ 
line-height:1.3; /#1.3 信行 高 4/ 


} 
Pic{ 
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width:720px: 族 宽 度 */ 
} 
hf 
font-size:24px; A 字体 大 小 */ 
} 
JP 
font-size: 13px: 个 字体 大 小 */ 
color-#ccccce; /颜色 %/ 
} 
pspan{ 
font-weight:bold; At 粗 体 9/ 
colorred: /颜色 9/ 
} 
让 段落 文字 被 选中 时 的 样式 */ 
P::selection{ 
background-color:black; Ar 背 景色 */ 
color-white; /颜色 */ 
} 
‘firstpara{ 
text-indent:0; /* 首 行 缩 进 0 个 字符 # 
} 
引用 样式 firstpara 的 第 一 个 字符 样式 */ 
.firstpara::first-letter{ 
font-size:30px; 个 字体 大 小 */ 
float:left: /浮动 %/ 
font-weight:bold; 4 粗 体 */ 
} 
4. 代码 分 析 


(1) 样式 body 改写 <body> 标 记 样式 , 设置 页 面 内 容 居中 ,页面 中 的 所 有 元 素 如 果 没有 进一步 明 
确 说 明 ， 则 都 居中 显示 。 
body{ 
text-align:center; 目 居 中 对 齐 */ 
} 
(2) 将 页 面 内 容 加 入 div 容器 中 : <div id="container">..….</div>。 样 式 #container 设置 窗口 的 宽度 
和 外 边 距 。 


#container{ 
width:720px: 户 宽度 */ 
margin:0 auto; 证 外 边 距 */ 

} 


(3) 标记 选择 器 p 对 所 有 段落 设置 样式 ， 字 体 大 小 为 13 像素 ，1.3 倍 行 高 ， 首 行 缩 进 两 个 字符 ， 
并 设置 段落 为 左 对 齐 。 
Pp{ 


text-align:left: 履 左 对 齐 */ 
text-indent:2em; /# 首 行 缩 进 两 个 字符 #/ 
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font-size:13px; 字体 大 小 */ 
line-height:1.3; 让 1.3 售 行 高 */ 
} 


(4) 标记 选择 器 hl 和 h2 设置 标题 1 和 标题 2 的 样式 。 


hf 
font-size:24px; 字体 大 小 所 

} 

mt{ 
font-size:13px; 让 字体 大 小 */ 
color#fcccccc; 证 颜 色 */ 


(5) 包含 选择 器 p span 设置 段落 中 <span> 元 素 的 样式 为 红色 粗 体 ， 为 文字 “(间隔 一 作 : 隔绝 )” 
应 用 该 样式 。 


Pp span{ 
font-weight:bold; + 粗 体 */ 
colorred: /颜色 t/ 


} 
(6) 伪 对 象 选择 器 p::selection 对 段落 中 被 选择 的 文字 设置 黑 底 白字 的 反选 效果 。 


Pp::selection{ 
background-color:black; 。 /+* 背 景色 */ 
color:-white; /4 颜色 
本 章 小 结 


本 章 介 绍 了 CSS 选择 器 、:target 伪 类 以 及 否定 伪 类 。 然 后 简要 论述 了 CSS 2.1 中 生成 内 容 的 伪 
元 素 ::before 和 ::after， 了 解 它 们 如 何 与 HIMLS 的 内 容 相 结合 ， 并 介绍 CSS3 中 新 的 双 冒 号 语法 。 

使 用 强大 的 CSS3 选择 器 , 不 必 在 标记 中 添加 必要 的 类 和 了 D, 就 能 将 内 容 和 显示 方式 彼此 分 开 。 
本 章 介绍 了 CSS3 选择 器 如 何在 元 素 组 中 选择 第 一 个 元 素 、 最 后 一 个 元 素 、 奇 数 项 和 偶数 项 元 素 ， 
以 及 如 何 使 用 表达 式 和 元 素 选择 元 素 组 。 还 介绍 了 如 何 使 用 否定 伪 类 进行 测试 和 诊断 ， 如 何在 合 i 
的 地 方 添加 生成 的 内 容 ， 如 何 使 用 :target 和 UI 元 素 状态 伪 类 提供 更 好 的 反馈 和 用 户 体验 。 


思考 和 练习 


1. 创建 一 个 诊断 样式 表 ， 用 它 测试 站 点 ， 选 择 出 空 特性 或 缺失 的 值 。 

2. 分 析 一 些 站 点 ， 确 定 可 以 在 哪里 使 用 强大 的 CSS3 选择 器 ， 而 不 需要 在 标记 中 添加 类 或 ID。 
应 包含 本 章 介 绍 的 许多 选择 器 ， 然 后 使 用 ::before 和 ::after 伪 元 素 集成 一 些 生成 的 内 容 。 

3. 使 用 :target 选择 器 ， 建 立 一 个 仅 有 CSS 的 图 像 库 。 

4. 在 CSS3 中 ， 有 哪 几 种 不 同类 型 的 选择 器 ? 
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5. 后 代 选 择 器 匹配 一 个 元 素 的 所 有 后 代 元 素 ， 例 如 table b{color:red;} 表 示 什 么 ? 
6. CSS 中 的 类 选择 符 在 定义 前 要 有 什么 指示 符 ? 

7. 什么 是 多 元 素 选 择 器 ? 

8. 什么 是 通用 选择 器 ? 


第 9 章 


文本 与 字体 


长 期 以 来 ，Web 页 面 排 版 是 一 个 被 很 多 人 忽略 的 领域 。 尽 管 Photoshop 或 InDesign 等 编辑 软件 
在 字体 方面 有 很 多 改进 ， 但 浏览 器 仍然 必须 使 用 非常 基本 、 有 限 的 字体 技术 。 这 种 状况 随 着 CSS3 
的 出 现 而 发 生 了 改变 。 在 深入 介绍 CSS3 新 提供 的 字体 工具 之 前 ， 先 要 了 解 “字体 ”的 含义 和 Web 
字体 的 概念 。 在 本 章 中 ， 将 介绍 如 何 使 用 CSS 来 控制 页 面 的 样式 风格 ， 包 括 字体 的 颜色 与 大 小 、 线 
型 的 宽度 与 颜色 ， 以 及 使 用 CSS3 调整 字体 的 不 同方 式 。 

本 章 的 学 习 目 标 : 

。 了 解 字 库 和 字体 的 概念 

e 掌握 使 用 CSS 控制 文本 的 基本 方法 
了 解 Web 字体 的 概念 及 发 展 历史 
掌握 使 用 @font-face 指令 自 定义 字体 
掌握 使 用 CSS3 控制 字体 的 不 同方 式 


5 用 Css 控制 文本 


在 CSS 中 ， 有 些 属 性 可 以 用 来 控制 文档 中 文本 的 外 观 。 这 些 属 性 分 成 两 组 : 

e 直接 影响 字体 及 其 外 观 的 属性 (包括 使 用 的 字库 ， 是 否 为 正体 、 粗 体 或 斜体 ， 以 及 文本 尺 
寸 等 )。 

e。 具有 的 效果 与 所 用 字体 无 关 的 属性 ， 包 括 文本 颜色 、 单 词 或 字母 间 的 距离 等 。 

表 9-1 列 出 了 直接 影响 字体 的 属性 。 


表 9-1 字体 属性 
属 性 作 用 
font 允许 将 下 面 多 个 属性 联合 成 为 一 个 属性 
font-family 指定 应 该 使 用 的 字库 或 字体 族 
font-size 指定 字体 大 小 
font-weight 指定 字体 应 为 正常 或 粗 体 


指定 字体 应 为 正常 、 斜 体 或 伪 斜 体 
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fontvariant | 指定 字 体 应 为 正常 或 小 型 大 写字 生 


在 详细 介绍 这 些 属性 之 前 ， 先 来 了 解 一 下 印刷 学 中 的 一 些 关 键 术 语 。 其 中 最 重要 的 就 是 ， 字 体 
与 字库 是 两 个 不 同 的 概念 。 


9.1.1 ”字库 和 字体 


e。 “字库 ”是 字体 族 ， 如 Arial 字体 族 。 

e。 “字体 ”是 字体 族 的 特定 成 员 ， 如 Arial 12 号 粗 体 。 

字体 族 通常 属于 两 个 群体 之 一 : serif 或 sans-serif 字体 。serif 字体 在 字母 中 带 有 额外 的 曲线 。 例 
如 ， 在 图 9-1 中 ， 第 一 个 字母 “1” 在 顶端 与 底部 都 包含 所 谓 的 “ 衬 线 ”; 而 sans-serif 字体 的 字母 则 
拥有 笔直 的 端点 ， 如 图 9-1 中 的 第 二 组 示例 所 示 。 

第 三 类 常见 的 字体 族 是 等 宽 字 体 。 等 宽 字体 中 每 个 字母 的 宽度 都 相同 ， 而 非 等 宽 字 体 对 于 不 同 
字母 宽度 也 不 同 。 例 如 serif 与 sans-serif 字体 中 ， 字 母 1 通常 要 比 字母 m 窄 。 


Im Im lm 


sans-serif 字体 等 宽 字体 
图 9-1 三 类 字体 族 
下 面 示例 中 的 文本 段落 会 被 重复 使 用 ， 而 每 一 个 <p> 元 素 则 带 有 不 同 的 class 特性 值 。 
<p class="sans-serif'>Here is some text in a sans-serif font</p> 
<p class="serif >Here is some text in a serif font</p> 
<p class="monospace">Here is some text in a monospaced font.</p> 
可 以 通过 为 每 个 段落 编写 独立 的 规则 , 来 观察 不 同 的 属性 如 何 对 <p> 元 素 产生 影响 。 可 以 在 CSS 
选择 器 中 使 用 class 特性 的 值 来 创建 每 次 只 应 用 于 一 个 <p> 元 素 的 规则 。 


9.1.2 font-family 属性 


font-family 属性 能 够 指定 应 用 CSS 规则 的 元 素 中 所 有 文本 应 使 用 的 字库 。 

在 选择 字 型 时 ， 浏 览 器 只 能 在 计算 机 中 已 经 安装 对 应 字库 的 情况 下 才能 以 指定 字体 显示 HIML 
文本 。 这 就 是 为 什么 在 浏览 网 站 时 , 大 多 数 网 站 都 依赖 访问 Web 的 计算 机 中 都 会 安装 的 一 小 组 字库 ， 
特别 是 Arial、Courier/Courier New、Georgia、Times/Times New Roman 以 及 Verdana， 其 中 ，Arial 
与 Verdana 尤其 受 欢 迎 ， 因 为 它们 被 认为 易于 在 线 阅 读 。 

为 了 对 这 一 问题 有 所 帮助 ， 可 以 指定 一 个 字 型 列表 。 如 果 用 户 在 计算 机 中 没有 安装 指定 的 第 一 
选择 字库 , 浏览 器 能 够 尝试 以 第 二 甚至 第 三 选择 字库 显示 文本 。 列表 中 的 每 种 字库 都 使 用 逗号 分 隔 ， 
而 如 果 名 称 中 包含 空格 (如 times new roman 或 courier new)， 则 应 该 将 字库 名 称 放 在 双 引 号 中 ， 如 下 
所 示 : 

Pp.sans-serif { 

font-family : arial, Verdana. sans-serif 
} 
Psenif { 


238 


第 9 章 文本 与 字体 


图 9-2 展示 了 效果 。 可 以 看 到 为 每 个 段落 使 用 的 不 同 字库 。 


Be ER Yew Hestory Bookmars JIoos Hep 


Font Properties 
Here is some text in a sans-serif font. 
Here is some text in a serif font. 


Here is some text in a monospaced font. 


图 9-2 每 个 段落 使 用 不 同 的 字库 


上 例 中 的 每 个 字库 列表 都 以 所 谓 的 “通用 字体 名 称 ”(sans-serif、serif 以 及 monospace) 结 束 。 即 ， 
每 台 计 算 机 都 应 安装 对 应 于 5 种 通用 字体 族 (sans-serif、serif、monospace、cursive 以 及 fantasy) 之 一 
的 字体 ， 如 果 无 法 找到 指定 的 字库 ， 则 可 以 选择 使 用 与 通用 字体 族 对 应 的 字体 ， 如 表 9-2 所 示 。 


表 9-2 通用 字体 名 称 


固定 宽度 字体 Courier 
模拟 手写 字体 Comic Sans 


用 于 标题 等 的 装饰 字体 


选择 字体 列表 时 需要 考虑 的 一 件 事 是 ， 每 种 字体 的 高 度 与 宽度 可 能 不 同 ， 因 此 需要 选择 一 组 尺 
二 类似 的 字体 。 例 如 ，Courier New 很 矮 很 宽 ， 因 此 如 果 它 是 第 一 选择 的 话 ， 将 Impact 作为 第 二 选 
择 明 显 不 合适 ， 因 为 Impact 很 高 很 罕 。 


9.1.3 font-size 属性 
font-size 属性 能 够 为 字体 设置 尺寸 。 可 以 经 常 看 到 该 属性 的 值 以 像素 为 单位 ， 例 如 : 


ptwelve { 
font-size : 12px; 
j 


不 过 ， 其 实 可 以 以 很 多 种 方式 为 该 属性 提供 值 。 
e@ 长 度 。 


Px em ex pt in cm pc mm rem vw vh 


日 绝对 尺寸 : 每 一 个 值 都 对 应 一 个 固定 尺寸 。 
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xx-small x-small small medium large x-large xx-large 

@ ”相对 尺寸 ， 该 值 与 周围 文本 相关 联 。 

smaller larger 

e@ 百分比: 计算 该 部 分 相对 于 父 元 素 的 百分比 。 
2% 10% 25% 5096 100% 

下 例 中 使 用 上 述 每 一 种 方式 指定 font-size 属性 的 值 : 


Pone { 
font-size : xx-small; 
于 
pitwelve { 
font-size : 12px; 
} 
pthirteen { 
font-size : 3pe; 
1 
Ppfourteen { 
font-size : 1096: 
} 


图 9-3 展示 了 浏览 器 中 上 述 字体 尺寸 集合 的 效果 。 


Absolute Pixels Points Plcas 


m 5 
36px 2 
a8px 36Pt 4pc 
48 pt 
Ems Es Percents 。 Viewpor RootElement 
2em 四 一 一 2rem 
em am 
3em sox zo0% evh rem 
6ex 3rem 
4em 200% 


7ex 


图 9-3 浏览 器 中 上 述 字体 尺寸 集合 的 效果 


9.1.4 fontweight 属性 


大 多 数字 体 都 有 不 同 的 变 体 ， 如 粗 体 及 斜体 。 当 印刷 商 创建 一 种 新 字体 时 ， 通 常 还 会 为 粗 体 再 
单独 创建 较 粗 版 本 。 

浏览 器 通常 会 使 用 一 种 算法 将 正常 版 本 的 字体 加 粗 ， 而 不 是 使 用 字体 的 粗 体 版 本 。 因 为 使 用 了 
算法 ， 所 以 意味 着 还 可 以 创建 较 细 版 本 的 字体 。 这 就 是 font-weight 属性 的 用 途 。 

font-weight 属性 的 可 能 取 值 为 : 


normal bold bolder lighter 100 200 300 400 500 600 700 800 900 
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下 例 中 使 用 了 其 中 的 几 种 取 值 (ch07_eg04.css): 


pone{ 
font-weight : normal: 
} 
Ptwo{ 
font-weight : bold; 
3 
pthree { 
font-weight : normal:; 
Pp.three span { 
font-weight : bolder 
} 
Piour { 
font-weight : bold; 
} 
Pifour span { 
font-weight : lighter 
} 
pfive{ 
font-weight : 100; 
| 
Psix{ 
font-weight : 200; 
} 


图 9-4 展示 了 这 些 值 在 浏览 器 中 的 效果 。 


th i My nt 


Font Weight 


图 9-4 ”font-weight 属性 的 各 种 取 值 在 浏览 器 中 的 效果 
在 这 些 值 中 ，bold 最 常用 。 不 过 ， 你 可 能 也 见 过 使 用 normal 的 情况 (尤其 当 一 大 段 文本 已 经 加 
粗 时 ， 必 须 创建 一 些 非 加 粗 文 本 作为 特例 的 情况 )。 
9.1.5 font-style 属性 
font-style 属性 能 够 指定 字体 应 为 normal、italic 还 是 oblique。 这 些 也 是 font-style 属性 的 值 ， 例 
如 : 


pone{ 

font-style : normal: 
} 
Pitwo{ 
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font-style : italic; 
} 
Pp:three { 
font-style : oblique; 
} 
图 9-5 展示 了 浏览 器 中 这 些 值 的 效果 。 
Be Ch bem Mom Coral Tob eb 
font-style 


Th 


ge fo 
Thia ssn ohioue fom 


图 9-5 ”font-style 属性 的 各 种 取 值 在 浏览 器 中 的 效果 


在 印刷 学 中 ， 字 体 的 斜体 (italic) 版 本 通常 是 一 种 基于 笔迹 的 特殊 风格 版 本 ， 而 伪 斜 体 (oblique) 
版 本 则 是 将 正常 版 本 倾斜 一 定 角度 来 使 用 。 在 CSS 中 ， 当 指定 font-style 属性 为 italic 时 ， 浏 览 器 通 
常会 取 字 体 的 正常 版 本 , 然后 简单 倾斜 一 定 角 度 进行 泻 染 (与 你 所 期 待 的 使 用 伪 斜 体 时 应 有 的 效果 
一 样 )。 


9.1.6 font-variant 属性 


font-variant 属性 有 两 个 可 能 的 取 值 : normal 及 small-caps。 小 型 大 写字 体 就 像 是 较 小 版 本 的 大 写 
字母 集合 。 
例如 ， 在 下 面 的 段落 中 ， 包 含 一 个 带 有 class 特性 的 <span> 元 素 : 
<p>This is a normal font, but then <span class="smallcaps">there 
are some small caps</span> in the middle.</p> 
现在 看 一 下 样式 表 : 
p{ 
font-variant : normal; 
} 
span.smallcaps { 
font-variant : small-caps: 
} 


如 图 9-6 所 示 ， 与 <span> 元 素 相关 联 的 规则 指定 其 内 容 应 该 以 小 型 大 写字 母 显示 。 


Be Ed Yen Hlory Bodrats Ieds tb 3 


font-variant 


This fs normal font butthen ruenE AnE Some SwaLL cArs nithe 
miede. 


图 9-6 ”<span> 元 素 的 内 容 以 小 型 大 写字 母 显示 
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用 CSS 格式 化 文本 


除 影响 字体 的 属性 外 ， 还 有 一 些 属性 可 用 于 影响 文本 的 外 观 或 格式 ， 它 们 独立 于 显示 文本 的 字 


体 ， 如 表 9-3 所 示 。 


表 9-3 文本 格式 化 属性 


属 性 作 用 
color 指定 文本 颜色 
text-align 指定 文本 在 包含 元 素 中 水 平 对 齐 
vertical-align 指定 文本 在 包含 元 素 中 垂直 对 齐 
text-decoration 指定 文本 是 否 应 具有 下 画 线 、 上 画 线 或 中 画 线 
text-indent 指定 从 左 侧 边框 起 对 文本 进行 缩 进 
text-transform 指定 元 素 内 容 应 全 部 为 大 写 、 小 写 ， 或 首 字母 大 写 
text-shadow 指定 文本 应 具有 投影 
letter-spacing 控制 字符 间 宽 度 ( 即 印刷 设计 师 熟 知 的 “ 字 距 ”) 
word-spacing 控制 单词 间 的 距离 
white-space 指定 空格 是 否 应 该 被 压缩 、 保 留 或 阻止 换行 
direction, 指定 文本 行文 方向 (类 似 于 dir 特性 ) 

9.2.1 color 属 性 


color 属性 能 够 指定 文本 的 颜色 。 该 属性 最 常见 的 取 值 是 十 六 进 制 颜色 代码 或 颜色 名 称 。 
例如 ， 下 面 的 规则 会 使 元 素 内 容 变 成 红色 。 


p{ 
color : HIDOOO; 
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9.2.2 textralign 属性 


text-align 属性 的 功能 与 已 经 废弃 的 align 特性 类 似 。 它 会 将 文本 在 包含 元 素 或 浏览 器 窗口 中 对 
齐 。 表 9-4 给 出 了 text-align 属性 可 能 的 取 值 。 


表 9-4 ”text-align 属性 可 能 的 取 值 


值 作 用 
本 与 包含 元 素 的 左边 框 中 的 文本 对 齐 
sight | 与 包含 元 素 的 右边 框 中 的 文本 对 齐 
| 将 内 容 在 包含 元 素 中 居中 放置 


将 文本 宽度 拉 伸 至 整个 包含 元 素 的 宽度 


于 Css3 中 引入 ， 将 行内 内 容 与 行内 盒子 的 起 始 处 对 齐 
于 Css3 中 引入 ， 将 行内 内 容 与 行内 盒子 的 结尾 处 对 齐 


图 9-7 展示 了 这 些 属性 在 500 像素 宽 的 表格 中 的 工作 效果 。 
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图 9-7 text-align 属性 值 在 500 像素 宽 的 表格 中 的 工作 效果 
下 面 是 要 应 用 于 本 例 中 每 个 表格 行 的 规则 : 


‘leftAlien { 
text-align : le 位 
} 
TightAlign { 
text-align : right; 
} 
.Center { 
text-align : center; 
} 
justity { 
text-align : justify; 
} 


9.2.3 vertical-align 属性 
vertical-align 属性 在 使 用 行内 元 素 时 ， 尤 其 是 图 片 及 文本 片段 ， 特 别 有 用 。 它 能 够 控制 这 些 元 
素 在 其 包含 元 素 中 的 垂直 定位 ， 例 如 : 
span .footnote { 
Vertical-align : sub; 
} 
该 属性 可 以 有 多 种 取 值 ， 如 表 9-5 所 示 。 


表 9-5 ”vertical-align 属性 的 取 值 


值 作 用 
baseline 与 父 元 素 的 基线 对 齐 ( 此 为 默认 设置 ) 
sub 将 元 素 作为 下 角 标 。 对 于 图 片 ， 其 顶端 应 处 于 基线 上 。 对 于 文本 ， 字 体 主体 的 顶端 应 处 于 基线 上 
super 将 元 素 作为 上 角 标 。 对 于 图 片 ， 其 底部 应 与 字体 顶端 对 齐 。 对 于 文本 ， 下 探 部 分 (g 与 p 等 字母 位 
于 文本 线 以 下 的 部 分 ) 的 底部 应 与 字体 主体 的 项 端 对 齐 
t 将 文本 顶端 及 图 片 顶端 与 行内 最 高 元 素 的 顶端 对 齐 
text-top, 将 文本 顶端 及 图 片 顶端 与 行内 最 高 文本 的 顶端 对 齐 
middle 将 元 素 的 垂直 中 点 与 父 元 素 的 垂直 中 点 对 齐 
bottom 将 文本 底部 及 图 片 底部 与 行内 最 低 元 素 的 底部 对 齐 
text-bottom 将 文本 底部 及 图 片 底部 与 行内 最 低 文本 的 底部 对 齐 


该 属性 的 取 值 还 可 以 是 inherit、 长 度 值 或 百分比 值 。 
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9.2.4 text-decoration 属性 
text-decoration 属性 能 够 使 用 表 9-6 中 的 值 。 


表 9-6 textdecoration 属性 的 取 值 


什 作 用 
underline | 在 内 容 下 方 添加 一 条 线 
| 在 内 容 顶 部 之 上 添加 一 条 线 
line through | 添加 一 条 从 中 间 穿 过 内 容 的 线 ， 如 中 画 线 。 总 体 而 言 ， 该 值 应 只 用 于 指定 标记 为 删除 的 文本 
Dk 移 除 元 素 中 的 任何 文本 装饰 


下 例 在 不 同 段落 中 使 用 了 这 些 属性 值 : 

Pp.underline { 

text-decoration : underline; 
} 
Pp.overline { 

text-decoration : overline; 
} 
p.line-through { 

text-decoration : line-through; 
} 


图 9-8 展示 了 这 些 属性 值 在 Firefox 浏览 器 中 的 效果 。 
Ble Cd ET Bovinals Jecb beb 


text-decoration 


dbounderned 


Thie set should be bineng 


图 9-8 ”text-decoration 属性 值 的 工作 效果 


9.2.5 text-indent 属性 


text-indent 属性 能 够 在 元 素 中 缩 进 文本 的 第 一 行 。 在 下 面 的 例子 中 ， 为 第 二 个 段落 应 用 了 该 
属性 : 

<p>This paragraph should be aligned with the left-hand side of the browser. </p> 

<p class="indent">Just the firstline of this paragraph should be indented by 

3 em this should not apply to any subsequent lines in the same paragraph. </p> 

如 下 是 用 于 缩 进 第 二 个 段落 的 规则 : 

indent { 

text-indent : 3em: 
} 
图 9-9 展示 了 效果 。 
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Ee ee Mer ras io tp 


text-indent 


9-9 ”text-indent 属性 的 效果 


9.2.6 ”text-shadow 属性 


text-shadow 属性 被 用 于 创建 投影 , 即 文本 背后 稍 有 偏 移 的 深 色 版 本 。 该 属性 经 常用 于 打印 媒体 ， 
而 它 的 受 欢迎 程度 使 它 获得 了 属于 自己 的 CSS 属性 。 该 属性 的 值 相当 复杂 ， 因 为 它 需 要 一 个 颜色 参 
数 以 及 三 个 长 度 参数 : 

.dropShadow { 

text-shadow : #999999 10px 10px 3px; 

} 

在 指定 颜色 参数 之 后 ， 前 两 个 长 度 参 数 指定 投影 落下 的 位 置 应 该 离 原始 文本 多 远 (使 用 和 X 及 站 
坐标 )， 而 第 三 个 长 度 参数 则 指定 投影 应 具有 的 模糊 程度 。 

所 有 主流 浏览 器 都 支持 该 属性 ， 包 括 正 10 及 其 后 续 版 本 。 图 9-10 展示 了 本 例 在 Safari 浏览 器 
中 的 效果 。 


drop-shadow 


This.heading should hayeeasdsop,shadow, 


图 9-10 用 text-shadow 属性 创建 的 投影 在 Safari 浏览 器 中 的 效果 


9.2.7 text-transform 属性 
text-transform 属性 能 够 指定 元 素 内 容 的 大 小 写 形式 ， 取 值 如 表 9-7 所 示 。 


表 9-7 ”text-transform 属性 的 取 值 


值 作 用 
none 不 发 生变 化 
italize 每 个 单词 的 首 字母 大 写 
uppercase 将 元 素 的 全 部 内 容 设置 为 大 写 
lowercase 将 元 素 的 全 部 内 容 设置 为 小 写 


为 演示 该 属性 ， 在 下 面 的 示例 中 有 4 个 段落 : 


<p class="none">This text has not been transformed</p> 
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<p class="capitalize">The first letter of each word will be capitalized</p> 
<p class="uppercase">All of this text will be uppercase</p> 
<p class="lowercase">ALL OF THIS TEXT WILL BE LOWERCASE</p> 


在 以 下 样式 中 


Ppnone { 


可 以 看 到 text-transform 属性 所 用 的 4 种 不 同 取 值 : 


本 Ch Wow Roy Dadmals Tb Heb 


text-transform 


Thee teanso not oeon tanciomed 


图 9-11 各 个 段落 在 浏览 器 中 应 用 样式 后 的 效果 


9.2.8 letter-spacing 属性 


letter-spacing 


属性 控制 着 一 种 被 印刷 设计 师 称 作 “ 字 距 ”的 东西 ， 字 符 间 的 空隙 。 松 字 距 的 字 


符 之 间 有 很 大 空间 ， 而 紧 字 距 则 表示 字符 挤 在 一 起 。 若 没有 设置 字 距 ， 则 字符 间 采 用 字体 的 正常 


间距 。 


如 果 需 要 增加 或 缩小 字符 间 的 空间 ， 则 很 可 能 会 以 像素 或 “em” 为 单位 进行 设置 (不 过 ， 其 实 
可 以 使 用 CSS 支持 的 任何 长 度 单位 。 如 果 有 一 段 文本 的 字符 间距 发 生 了 改动 ,那么 可 以 使 用 关键 字 
normal 指定 元 素 不 应 带 有 任何 字 距 。 


下 例 中 的 第 一 


段 使 用 了 普通 字 距 。 第 二 段 展示 了 字符 间距 为 3 个 像素 时 的 效果 。 第 三 段 展示 了 


字符 间距 为 0.5em 时 的 效果 。 最 后 一 段 展示 了 在 普通 间距 基础 上 削减 1 像素 时 的 效果 : 
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图 9-12 给 出 了 本 例 在 浏览 器 中 的 效果 。 


Fe ER ww Miery Eelnats Took bp 


letter-spacing 


9-12 ”浏览 器 中 的 字 距 效果 


9.2.9 word-spacing 属性 


word-spacing 属性 设置 单词 间 的 距离 。 在 下 面 的 例子 中 ， 第 一 段 中 的 单词 间 为 标准 间距 ， 第 二 
段 中 的 单词 间 具 有 10 像素 的 间距 ， 而 最 后 一 段 中 的 单词 间 在 普通 间距 的 基础 上 削减 1 像素 。 


图 9-13 展示 了 本 例 的 效果 。 


Eh 上 Yon Haory Bomaric Took bp 


word-spacing 
There ea standordgep adween each word 
mee ls a 20 phel gop bebweon eaeh word 


There la 9-1 pbcel gop teiween eachword 


图 9-13 使 用 word-spacing 属性 设置 单词 间距 的 效果 


9.2.10 ”white-space 属性 


浏览 器 会 将 两 个 或 多 个 相 邻 的 空格 压缩 成 一 个 空格 ， 并 且 会 将 回 车 符 也 变 为 空格 。white-space 
属性 控制 空格 是 否 保留 , 其 提供 的 功能 类 似 于 HIML <pre> 元 素 , 将 保留 所 有 空格 ; 或 类 似 于 nowrap 
特性 ， 只 有 在 显 式 告知 时 ， 文 本 才 会 换行 。 表 9-8 给 出 了 该 属性 的 取 值 。 


表 9-8 ”white-space 属性 的 取 值 


值 作 用 
normal 遵循 正常 的 空格 压缩 规则 
pre 与 HIML<pre> 元 素 相同 ， 保 留 空格 ， 但 格式 仍 与 元 素 的 设置 相同 (与 <pre> 元 素 不 同 ， 默 认 情况 下 
不 以 等 宽 字符 显示 ) 


nowrap 只 有 在 显 式 使 用 <br> 元 素 指定 时 才 对 文本 进行 换行 ， 否 则 文本 不 会 换行 
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例如 ， 可 以 按 如 下 方式 使 用 white-space 属性 : 


可 以 在 图 9-14 中 看 到 效果 。 


| 


Be El Wen Meo onals eck Pop 


white-space 


Harels some te Insite apararach sewnedintast te wnte-spacs propeny of CSS 
bom 


he hi spate propemy of 


ato tost he hie- spacs prope ry of CS Hans is some tot nid| 


了 


9-14 合用 white-space 属性 的 两 种 方式 
9.2.11 direction 属性 


direction 属性 与 dir 特性 类 似 ， 用 于 指定 文本 应 该 流动 的 方向 。 表 9-9 给 出 了 该 属性 的 取 值 。 


表 9-9 direction 属性 的 取 值 


作 用 
Itr 文本 由 左 向 右 流动 
世 文本 由 右 向 左 流动 
inherit 文本 的 流动 方向 与 父 元 素 相同 
例如 ， 如 下 是 指定 两 个 段落 分 别 使 用 不 同文 本 方向 的 规则 : 
pltr{ 
direction : Itr; 
} 
prl{ 
direction : tl; 
3 


在 实践 中 ,该 属性 的 作用 与 align 特性 相同 。 当 取 值 为 划 时 , 仅仅 简单 向 右 对 齐 文本 , 如 图 9-15 
所 示 。 但 需要 注意 的 是 ， 在 应 该 由 右 向 左 显示 的 段落 中 ， 句 号 (或 完全 停止 符 ) 出 现在 句子 的 左 侧 。 


Be Eh Yew Mewy Coolnals lnk tb 


direction 
Th tedsnoul fow le e rah 


Tristot should ow rioht elet 


9-15 ”direction 属性 的 应 用 效果 
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9.2.12 文本 伪 类 


在 学 习 有 关 文 本 的 知识 时 ， 有 两 个 伪 类 有 助 于 文本 的 使 用 。 这 两 个 伪 类 能 够 以 与 元 素 中 其 他 部 
分 不 同 的 方式 泻 染 元 素 中 的 第 一 个 字符 或 第 一 行内 容 。 


1. first-letter 伪 类 


first-letter 伪 类 能 够 指定 仅 适 用 于 元 素 中 首 字符 的 规则 。 其 最 常 被 用 于 杂志 文章 或 书籍 中 新 页 面 
的 第 一 个 字符 。 

下 面 的 示例 中 ，first-letter 伪 类 被 应 用 于 一 个 class 特性 值 为 ntroduction 的 <p> 元 素 。 注 意 该 元 
素 的 选择 器 与 frstletter 伪 类 之 间 如 何 使 用 冒号 分 隔 : 

Dintroduction:first-letter { 

font-size : 42px; 
} 
图 9-16 显示 了 first-letter 伪 类 的 效果 。 


图 9-16 first-letter 伪 类 的 效果 


2. first-line 伪 类 


first-line 伪 类 能 够 以 与 段落 中 其 他 部 分 不 同 的 方式 泻 染 所 有 段落 的 第 一 行 。 通 常 ， 效 果 是 以 粗 
体 显示 ， 从 而 使 读者 能 够 看 到 (文章 的 ) 介 绍 或 (诗歌 的 ) 第 一 行 。 

伪 类 的 名 称 与 元 素 的 选择 器 之 间 使 用 冒号 分 隔 : 

piintroduction:first-line { 

font-weight : bold; 

在 浏览 器 中 尝试 本 例 ， 因 为 如 果 调 整 窗口 尺寸 ， 并 使 第 一 行 中 的 文本 减少 ， 就 可 以 看 到 只 有 第 
一 行文 本 在 浏览 器 中 被 赋予 新 样式 。 参 考 图 9-16 以 查看 first-line 伪 类 的 使 用 情况 ， 该 图 还 演示 了 
first-letter 伪 类 的 效果 。 


文本 样式 化 实例 


CSS 在 Web 中 最 常见 的 任务 就 是 设置 文本 的 样式 。 在 接 下 来 的 实例 中 ,为 示例 网 站 设置 文本 
样式 。 

例 9-1: 为 Example Cafe 网 站 设置 文本 样式 。 

(1) 启动 文本 编辑 器 ， 创 建 一 个 名 为 interface.css 的 外 部 样式 表 文 件 。 将 该 文件 与 Example Cafe 
网 站 的 其 他 文件 一 样 ， 保 存 到 一 个 名 为 CSS 的 独立 文件 夹 中 。 在 样式 表 的 起 始 处 ， 添 加 一 段 解释 该 
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样式 表 用 途 的 注释 : 
/* style sheetforExample Cafe */ 


(2) 默认 字体 应 为 Arial。 如 果 用 户 未 安装 Arial 字体 ， 则 建议 使 用 Verdana 字体 。 若 仍然 失败 ， 
则 使 用 计算 机 中 默认 的 sans-serif 字体 。 


body{ 
font-family : arial, verdana, sans-serif 
} 
(3) 为 使 标题 以 不 同 字体 突出 显示 ， 设 置 Georgia 字体 为 标题 的 首选 字体 ， 其 次 为 Times 字体 ， 
而 最 终 为 默认 的 serif 字体 。 为 了 以 灰色 而 非 黑色 显示 ， 使 用 color 属性 为 标题 指定 颜色 (将 在 下 一 章 
中 对 此 进行 详细 讨论 )。 因 为 想 使 所 有 标题 保持 相同 的 风格 ， 所 以 应 按 如 下 方式 指定 单一 规则 : 
mt 
font-family : georgia, times, serif 
color : #666666; 
} 


(4) 段落 中 文本 的 尺寸 如 果 比 默认 文本 尺寸 稍 小 ， 则 效果 可 能 更 好 ， 因 此 将 其 设置 为 默认 尺寸 
的 90%， 同 时 将 文本 设置 为 深 灰 色 而 非 黑 色 。 
p{ 
font-size:90%; 
color#333333; 
} 


(5) 现在 来 看 一 下 导航 栏 。 特 别 要 注意 的 是 ， 需 要 控制 导航 栏 中 链接 的 外 观 。 为 实现 该 目的 ， 
打开 HIML 页 面 并 为 包含 导航 栏 的 <nav> 元 素 添加 id 特性 。 

<nav id="navigation"> 
HOME 
<a href="menu.html">MENU</a> 
<a href="recipes.html">RECIPES</a> 
<a href="opening html">OPENING</a> 
<a href="contact.html">CONTACT</a> 

<nav> 


(6) 为 了 添加 选择 器 (用 于 指定 仅 选择 这 特性 值 为 navigation 的 元 素 中 所 包含 的 <a> 元 素 ), 使 用 # 
号 后 跟 这 特性 值 的 方式 指定 。 以 下 规则 指定 这 些 链接 应 该 以 浅 蓝 色 显 示 ， 以 与 徽标 相 匹配 : 
javigation a { 
color#3399cc: 
} 
(7) 默认 情况 下 , 链接 会 以 下 画 线形 式 显示 。 可 以 通过 使 用 值 为 none 的 test-decoration 属性 移 除 
下 画 线 : 
javigation a { 
color : #3399cc: 
text-decoration : none: 
} 
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(8) 在 HTML 页 面 中 ， 需 要 添加 <link> 元 素 以 将 样式 表 文件 与 页 面相 关联 。 将 如 下 内 容 添 加 到 
每 个 页 面 中 : 
<link rel= "stylesheet" href="css/interface.css"> 
现在 ， 示 例 中 的 所 有 页 面 都 使 用 相同 的 样式 表 。 首 页 应 与 图 9-17 中 的 效果 类 似 。 
在 本 例 中 属性 只 有 两 个 来 源 : 一 种 是 创建 的 样式 表 ， 另 一 种 则 是 每 个 浏览 器 中 的 默认 样式 。 本 
中 编写 的 样式 规则 覆盖 了 浏览 器 的 默认 样式 。 


例 


© © filey//Fyh5+css3/HTML5+CSS3/hS/Example%20Cafeyindexhtml 有 文昌 


example 
cafe 


HOME MENU RECIPES CONTACT 


A community eafe serving home cooked, locally soureed, organic food 


With stunning views of the ocean, Example Cafe offers the pariect environment to unwind and rechatge the batones 


Our menu offers a wide rarge of breavfas's, brunches and unches incudirg a range of vegetaran cptons 


9-17 设置 文本 样式 后 的 Example Cafe 网 站 效果 


区 〗】 使 用 @font-face 自 定义 字体 


@font-face 是 CSS3 Fonts Module 中 的 一 条 规则 ， 最 初 在 2002 年 的 草案 中 引入 。 这 条 规则 通过 
允许 在 文档 中 直接 嵌入 字体 ， 提 供 了 对 Web 中 字体 的 极 大 控制 能 力 。 
9.4.1 解析 @font-face 语法 : @font-face 声明 
下 面 看 看 @font-face 规则 。 在 样式 表 中 声明 @font-face 的 方式 如 下 : 
@font-face { 
font-family: bodytext 
sre: url(ideal-sans-serif.woff) fommat("woff), 


wl(basic-sans-serif.ttf) format("opentype”): 
和 


在 这 条 规则 中 ， 字 体系 列 声明 了 使 用 这 个 定制 字体 时 用 于 引用 它 的 名 称 。 例 如 ， 在 这 条 规则 中 
指定 的 字体 可 以 用 如 下 方式 使 用 : 


Pp{ 
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font: 12px1.5 bodytext sans-serif 
} 
这 会 把 所 有 文本 显示 在 <p> 元 素 中 ， 字 体 采 用 字体 系列 指定 的 bodytext。 
属性 sre 链接 要 使 用 的 字体 的 URL。 
问题 是 ， 不 是 所 有 的 浏览 器 都 理解 所 有 的 字体 格式 ( 见 表 9-7)， 所 以 必须 指定 一 个 或 多 个 URL 
以 及 格式 函数 ， 以 指定 URL 引用 哪 种 格式 。 这 个 例子 先 声明 WOFF 字体 格式 的 URL， 再 声明 
OpenType 字体 格式 的 URL。 
在 sre 中 还 可 以 使 用 local0 函 数 ， 如 果 字体 在 本 地 可 用 ,就 显示 该 字体 。 这 个 想法 很 好 , 但 如 果 
本 地 字体 骨 溃 了 , 文本 就 不 会 显示 。 这 是 一 个 严重 的 问题 , 超出 了 Web 开发 人 员 的 控制 能 力 。 因 此 ， 
应 避免 使 用 本 地 字体 ， 仅 从 字体 URL 中 读 取 。 
在 @font-face 规则 中 ， 还 可 以 使 用 字体 描述 符 ， 例 如 font-weight: bold 或 font-style: italic。 这 些 
是 指示 符 ， 它 们 会 告诉 浏览 器 ， 在 需要 时 ， 不 要 人 为 地 给 这 些 Web 字体 生成 粗 体 或 斜体 。 在 把 这 个 
font-face 规则 应 用 于 标题 时 : 
HP { font: 16px/1.5 bodytext, sans-serif font-weight: bold: } 
浏览 器 必须 生成 字体 的 粗 体 效果 。 为 了 防止 这 种 情形 ， 只 需要 把 Web 字体 描述 为 粗 体 ， 只 使 用 
Web 字体 即 可 : 
@fontface { 
font-family: bodytext: 
sre: url(ideal-sans-serif.woff) format("woff"), 
url(basic-sans-serif.ttf) format("opentype"); 
font-weight: bold: 
} 
这 对 p 选择 器 没有 影响 ， 但 禁止 二 级 标题 显示 为 人 为 的 粗 体 。 


9.4.2”@font-face 的 可 靠 语法 


编写 应 用 于 所 有 浏览 器 的 @font-face 规则 似乎 并 不 是 很 困难 。 其 实 ， 这 个 任务 很 难 。 需 要 确保 
浏览 器 只 下 载 指定 的 几 个 资源 之 一 ， 这 样 页 面 会 很 快 加 载 完 。 有 一 种 语法 可 以 完成 这 个 任务 。 


@font-face { 
font-family: MyFontFamily’: 
src: url(myfont-webfont.eot); IE9 Compat Modes */ 
sre: url(myfont-webfont.eot?iefix'") format(eot)、 IE6~IES*/ 
url(myfont-webfont.woff) format(woff), 让 Moderm Browsers +/ 
url(myfont-webfont.ttf) format(truetype). /* Safari, Android iOS */ 


url(myfont-webfont.svg#svgFontName’) format(svg): /* LegacyiOS*/ 
} 


9.4.3 ”为 网 页 添加 自 定义 字体 的 实例 


添加 自 定义 字体 是 一 种 高 级 的 CSS 特性 , 下 面 通过 实例 说 明 这 种 有 些 复杂 的 添加 自 定义 字体 的 
方式 。 
例 9-2: 添加 自 定义 字体 ， 为 Example Cafe 网 站 增添 一 些 魅 力 。 
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(1) 启动 文本 编辑 器 ， 并 打开 interface.css 文件 ， 这 是 网 站 的 CSS 文件 。 
(2) 需要 将 网 站 中 标题 元 素 的 默认 字体 修改 为 Droid Serif, 这 是 由 Google Android 团队 提供 的 免 
费 字 体 。 为 下 载 所 有 需要 的 版 本 ， 并 生成 嵌入 字体 所 需 的 @fontface 代码 ， 请 访问 
http://www.fontsquirrel.com/fonts/Droid-Serif， 并 单 击 Webfont Kit 按钮 ， 如 图 9-18 所 示 。 
Hot Recent TopFontDeals Swag Generator Fontldentifier FontTalk Blog Pp 


DROIDSERF = ee 
. a ee California direct 


Supply 


FONT 
QUIRREL 
SWAG 
ME 


Droid Serif AaBbCcDdEeFfGgHhIiJjjKkLIM 
图 9-18 下 载 免费 字体 


(3) 选择 默认 选项 ， 然 后 单 击 DOWNLOAD @FONT -FACE KIT 按钮 。 这 样 就 可 以 下 载 一 个 包 
含 所 有 不 同 字体 格式 、 一 个 HIML 文件 以 及 一 个 CSS 文件 的 zip 文件。 解压 缩 该 zip 文件， 然后 将 
字体 文件 移 到 示例 网 站 中 一 个 名 为 fonts 的 新 文件 夹 中 。 

(4) 在 @font-face kit 中 打开 实例 的 stylesheet.css 文件 。 其 中 的 代码 应 如 下 所 示 : 


@font-face { 
font-family: DroidSerifRegular: 
ste: url(DroidSerif-Regular-webfont.eot); 
sre: url(‘DroidSerif-Regular-webfont.eot?#iefix'’) 
format(embedded-opentype)、 
mipPoidseif Regular-webfont.woff) format('woff), 


sre: url(DroidSerif-Italic-webfont.eot): 
ste: url( DroidSerif-Italic-webfont.eotr#iefix’) 
format(embedded-opentype’). 
‘url(DroidSerif-Ttalic-webfont. woff) format(woff). 
‘url(DroidSerif-Ttalic-webfont.ttP) formatCtruetype’). 
ul(DroidSerif-Ttalic-webfont.svg#DroidSerifftalic’) 
format(sveg): 
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font-weight: normal: 
font-style: normal: 
} 
@font-face { 
font-family: 'DroidSerifBold'; 
src: url(DroidSerif-Bold-webfont.eot); 
src: url(DroidSerif-Bold-webfont.eot?#iefix'’) 
format(embedded-opentype). 
wl(DroidSerif-Bold-webfont.wofF) format(woff), 
url(DroidSerif-Bold-webfont.ttf) format(truetype’), 
ul(DroidSerif-Bold-webfont.svg#DroidSerifBold'’) 
format(sve’); 
font-weight: normal; 
font-style: normal; 
a 
@font-face { 
font-family: 'DroidSerifBoldItalic’: 
sre: url(DroidSerif-BoldItalic-webfont.eot); 
sre: url(‘DroidSerif-BoldItalic-webfont.eot?#iefix’) 
format(embedded-opentype’), 
url(DroidSerif-BoldItalic-webfont.woff) format(‘wofFf), 
url(DroidSerif-BoldItalic-webfont.ttf) format('truetype’), 
url(DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic’) format('svg); 
font-weight: normal; 
font-style: normal: 
} 
(5) 需要 调整 所 有 URL， 以 便 与 创建 的 新 的 fonts 子 文件 夹 相 匹 配 。 以 DroidSerifRegular 的 定义 
为 例 ， 新 定义 应 如 下 所 示 : 


@font-face { 

font-family: 'DroidSerifRegular: 

sre: ul('. /fonts/DroidSerif-Regular-webfont.eot); 

sre: url('. /fonts/DroidSerif-Regular-webfont.eot?#iefix’) 

format(embedded-opentype’). 

url(./fonts/DroidSerif-Regular-webfont.woff ) format(wof), 
url(../fonts/DroidSerif-Regular-webfont.ttf) format(truetype’), 
url(. /fonts/DroidSerif-Regular-webfont svg#DroidSerifRegular’) 
format(sve): 

font-weight: normal; 

font-style: normal: 

} 

(6) 现在 关注 于 标题 元 素 。 标 题 元 素 不 再 使 用 Georgia 字体 ， 而 是 使 用 DroidSerifRegular 字体 。 把 
Georgia 字体 作为 备份 ， 以 防 自 定义 字体 出 现 某 些 问题 ， 或 用 户 使 用 很 旧 的 浏览 器 访问 网 站 的 情况 。 
新 的 标题 定义 应 如 下 所 示 : 

hl1,h2,h3,h4 { 

color : #666666:; 

} 
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(7) 现在 实例 中 的 所 有 页 面 都 应 该 使 用 相同 的 样式 表 ， 首 页 如 图 9-19 所 示 。 


Sxomple 


图 9-19 首页 效果 
@font-face 规则 创建 了 一 个 新 的 呈现 下 载 文件 的 字体 族 条 目 。 无 论 何 时 当 需 要 引用 它 时 ， 只 需 
要 简单 引用 为 文件 赋予 的 短 名 称 。 从 技术 上 说 ， 可 以 使 用 任何 名 称 为 新 字体 族 命 名 。 但 选择 一 个 能 
够 准确 描述 字体 的 名 称 ， 显 然 更 合理 。 
这 种 字体 格式 与 @font-face 声明 的 组 合 能 够 提供 对 Safari 5.03+、 IE6+、 Firefox 3.6+、Chrome 8+、 
iOS 3.2+、Android 2.2+ 以 及 Opera 11+ 的 支持 。 


使 用 CSS3 调整 字体 


使 用 Web 字体 为 所 有 浏览 器 提供 最 佳 体 验 时 , 应 确保 使 用 正确 的 默认 字体 首先 使 用 如 下 代码 : 
html { font-size: 100%; } 
这 会 确保 在 所 有 浏览 器 上 ， 内 容 开 始 时 使 用 标准 的 默认 字体 显示 。 在 桌面 上 ， 默 认 字体 大 小 是 
16px。 在 移动 设备 上 ， 字 体 的 显示 取决 于 分 辨 率 和 设备 像素 率 。 


9.5.1 设置 font-family 


指定 字体 系列 时 ， 应 确保 在 我 们 选择 的 字体 不 可 用 时 ， 文 本 能 以 可 读 的 格式 显示 出 来 。 为 此 ， 
可 以 设置 备 选 的 通用 字体 。Code Style 是 一 个 很 好 的 字体 库 (www.codestyle.org/)，CSS Font Stack 
(http://cssfontstack.comy) 是 另 一 个 美观 的 字体 库 。 
body { 
font-family: 'Helvetica Neue' Helvetica, Arial sans-serif 
另外 两 个 常用 的 通用 字体 系列 是 sans-serif 和 serif. 记 住 它们 (尤其 是 sans 和 serif 之 间 的 连 字 符 )! 
还 要 记 住 ， 要 把 带 有 空格 的 字体 名 放 在 引号 中 ， 例 如 “Helvetica Neue”。 
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9.5.2 设置 字号 

使 用 em 单位 设置 字号 。 用 em 指定 font-size 时 , 得 到 的 字号 是 em 值 与 继承 的 字号 之 积 。 例 如: 

body { font-size: 1009%6; } 

I2 {font-size: 2em: } 

<h2> 元 素 的 字号 是 32px。 这 是 相对 于 基本 字号 设置 字体 大 小 的 一 种 简单 方法 。 如 果 增 大 基本 字 
号 ， 其 他 元 素 都 会 自动 调整 。 

设置 字号 的 最 流行 方式 是 使 用 像素 。 但 如 果 客户 机 需要 较 大 的 文本 尺寸 ， 调 整 所 有 的 文本 就 比 
较 费 劲 。 如 果 使 用 em， 就 会 比较 简单 。 但 如 果 有 三 级 伐 套 ， 元 素 样式 被 高 度 定制 的 选择 器 无 意 重 写 
后 ， 使 用 em 就 很 难 维护 。 另 一 个 更 好 的 解决 方案 是 使 用 rem 单位 。 

rem 单位 允许 相对 于 <html> 根 元 素来 设置 字号 。 使 用 rem 蔡 代 em, 就 可 以 避免 em 的 定制 问题 ， 
修改 根 元 素 的 字号 ， 使 文本 统一 变 大 或 变 小 ， 如 表 9-10 所 示 。 


表 9-10 rem 单位 的 浏览 器 支持 情况 


上 | Frox | san | cnome | open 
+ uot 


因此 ， 建 议 用 rem 单位 设置 字体 ， 而 把 em 单位 用 作 备 选 。 


9.5.3 选择 字形 的 粗细 
使 用 font-weight 属性 可 以 使 文本 显示 得 更 粗 ， 它 有 如 下 取 值 。 
e@ ”100~900: 这 些 数字 构成 了 一 个 有 序 序列 ， 其 中 每 个 数字 都 表示 至 少 与 其 前 任 一 样 粗 的 值 。 
e@ _ normal: 字体 的 显示 效果 与 font-weight 指定 为 400 的 字体 一 样 。 
@ bold: 字体 的 显示 效果 与 font-weight 指定 为 700 的 字体 一 样 。 
e@ bolder: 字体 比 使 用 继承 的 font-weight 值 更 粗 。 例 如 : 
body { font-weight: normal: } 
P {font-weight: bolder } 
e@ lighter 字体 比 使 用 继承 的 font-weight 值 更 细 。 例 如 : 
body { font-weight: normal: } 
Pp { font-weight: lighter } 
bolder 和 lighter 的 准确 映射 如 表 9-11 所 示 。 


表 9-11 bolder 和 lighter 的 准确 映射 


继承 的 值 bolder lighter 
100 400 100 
200 400 100 
300 400 100 
400 700 100 
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( 续 表 ) 
继承 的 值 lighter 
700 400 
800 700 
900 700 


一 个 有 趣 的 功能 是 , 浏览 器 会 为 没有 给 bold 或 light 定义 设置 的 字体 生成 bold/light 字体 。 例如 ， 
如 果 使 用 Helvetica Neue Light, 把 font-weight 设置 为 800, 那么 因为 在 用 户 计 算 机 上 , Helvetica Neue 
Light 默认 没有 更 粗 的 字体 , 所 以 浏览 器 会 生成 一 个 更 粗 的 版 本 , 在 屏幕 上 显示 的 文本 效果 如 图 9-20 
所 示 。 表 9-12 列 出 了 font-weight 的 浏览 器 支持 情况 。 


This text is rendered with normal font 


This text is synthesized 


图 9-20 合成 的 文本 
表 9-12 font-weight 的 浏览 器 支持 情况 
EE | Feox | san | chme | oper 
sot 92+ 
9.5.4 ”选择 正确 的 字 宽 


使 用 font-stretch， 可 以 从 字体 系列 中 选择 正常 、 压 缩 、 扩 展 的 字体 。 只 有 下 9+ 和 Firefox9+ 支 持 
它 ， 如 表 9-13 所 示 。 


表 9-13 font-stretch 的 浏览 器 支持 


E | Fretox | sm | chome | over 
ot | »。. | . TT . | - 


9.5.5 设置 垂直 间距 


设置 字体 时 ， 确 保 设置 line-height 属性 。 行 高 可 以 是 无 单位 的 值 ， 表 示 任 何 选择 器 和 从 该 选择 
器 继承 样式 的 元 素 都 把 其 行 高 计算 为 该 无 单位 的 值 和 当前 字号 的 乘积 。 最 好 给 大 于 1 的 line-height 
设置 无 单位 的 值 ， 确 保 文本 总 是 可 读 的 。 


9.5.6 用 网 格 设计 字体 


要 在 Web 上 显示 美观 的 字体 ， 可 以 把 字体 设置 为 科 直 韵律 。 建 立 科 直 韵 律 时 ， 季 直 间 距 的 基本 
单位 是 行 高 。 建 立 合适 的 行 高 ， 使 其 可 应 用 于 页 面 上 的 所 有 文本 (包括 标题 、 主 体 或 边栏 ) 是 可 靠 的 
垂直 韵律 的 关键 ， 这 会 鼓励 并 引导 读者 继续 阅读 页 面 。 

有 两 种 方法 ， 一 种 是 使 用 em 单位 ， 另 一 种 更 简单 的 方法 是 使 用 像素 单位 。 下 面 是 使 用 了 垂直 
韵律 的 标记 : 


<p>There were four of us—George. and William Samuel Hamis, and myself and Montmorency. We were sitting in my room, 
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smoking, and talking about how bad we were—bad fiom a medical point of view Imean of course.</p> 

<p>We were all feeling seedy., and we were getting quite nervous aboutit. Hamis said he felt such extraordinary fits of giddiness 
come over him at times, that he hardly knew what he was doing: and then George said that he had fits of giddiness too. and hardly knew 
what he was doing. With me. it was my liver that was out of order.</p> 

< class="aside">I knew it was my liver that was out of order, because I had just been reading a patent liver-pill circular, in which 
Were detailed the various symptoms by which a man could tell when his liver was out of order. Thad them all-</p> 


首先 ， 需 要 确定 垂直 韵律 的 基本 单位 。 接 着 就 可 以 继续 用 像素 单位 或 em 单位 实现 这 个 基本 单 
位 的 倍数 。 为 了 提高 可 读 性 ， 基 本 单位 是 默认 字号 的 1.5 倍 ， 根 据 实现 方案 中 使 用 的 单位 ， 结 果 是 
1.5em 或 24px。 下 面 看 看 这 两 种 方法 。 


1. 使 用 像素 


body { 
/font sizeis 16px */ 
font-size: 100%; 


p{ 
+ total space vertically above and below each paragraph equals to one base unit: 24px  #/ 
margin: 12px 0; 
} 
在 这 些 代码 中 ， 建 立 了 基线 字体 间距 。 现 在 开始 第 一 段 。 它 应 比 其 他 段落 更 大 ， 但 仍 维持 垂直 
韵律 。 
pfirst-child { 
font-size: 24px: 
} 
每 次 声明 外 边 距 、 内 边 距 、 边框 时 , 确保 项 部 值 和 底部 值 的 和 是 基本 单位 的 倍数 。 尤 其 要 注意 ， 
外 边 距 的 合并 可 能 破坏 垂直 韵律 ， 所 以 需要 根据 应 用 于 前 一 个 元 素 的 外 边 距 ， 仔 细 设 计 外 边 距 。 为 
这 些 标记 应 用 这 个 样式 后 的 效果 如 图 9-21 所 示 。 可 以 看 出 ， 每 一 行 都 正好 占 满 垂 直 网 格 。 
下 面 设置 最 后 一 段 ， 使 其 带 有 边框 ， 字 号 变 小 ， 效 果 如 图 9-22 所 示 。 
p:last-child { 
font-size: 12px: 
/* margin-top is already margin-collapsed to be 12px, we now need to allocate rest of the margin to the bottom margin so in total 
with border-width it would be a multiple of the base unit */ 
margin: 12px 0: 
* Padding top and bottom is 12px each, total = 24px */ 
Padding: 12px 0; 
} 


2. 使 用 em 
/* gives us a base font-size of 16px. base line height of 24px on desktop browsers */ 


body { font-size: 10096: line-height: 1.5em:; } 
p{ 
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There were four of us 一 George,and William Samuel Harris, 
and myself, and Montmorency. We were sitting in my room, 
smoking, and talking about how bad we were 一 bad from a 
medical point of view I mean of course 

We were all fecling seedy, and we Were gerting quite nervous about it. Hamis said be fek such 
anordinery fm of Bddineu come oner hi ae tves, het be bandhy Knew what he ws 
‘joing; and then George said 由 at he had fis of giddiness to, and hardly knew what he was 


There were four of us 一 George, and William Samuel Harris, 
and myself, and Montmorency. We were sitting in my room, 
smoking, and talking about how bad we were 一 bad from a 
medical point of view I mean, of course. 

We were all eng seedy, nd we were geming quite nervous about 1. Haris aid he ek such 
eraordinary fi of giddiness come Over him at Gres, that he bardly knew whathe was 


Hoing. With me, i was my liver that was out of order doing; and then George said that he had fts of giddiness two, and hardly knew what he was 


doing. With me, i was my Ever that was out of order, 
Unew it was my liver that was out of order, because 1 bad just been reading paicativerpal 


sireular, tn which were detailed the varous sympaoms by which a man could cl when his 


er was out of order. Ehad em al ee Le be see ene spa hoe pl cree eben ee 


ope via ect eh wh ho bre wm omet ore Had em 


图 9-22 将 最 后 一 段 的 字号 变 小 ， 但 仍 占 满 网 格 


图 9-21 使 用 垂直 韵律 和 像素 ， 文 本 正好 占 满 网 格 


/* vertical space above and below each paragraph totals to one line: 24px (0.75em = 12px) +*/ 
margin: 0.75em 0; 
} 
pfirst-child { 
/* font-size is now 24px, line-height if not redeclared will be now 36px */ 
font-size: 1.5em:; 
/* line height is redeclared, now same as font size! 24px */ 
line-height: lem:; 
/* vertical space above and below each paragraph totals to one line: 24px */ 
margin: 1em 0; 
} 
Pilast-child { 
/* font size is now 12px, line height is redeclared and will be 2+12px =24px +*/ 
font-size: 0.75em:; 
line-height: 2em:; 


/* previous paragraph has margin bottom set to 12px, hence margin collapsing means We cannot set a smaller margin-top forthis 


selector. We now need to allocate rest of the margin to the bottom margin (12px/7.2px = 1.667em) so in total with border-width 让 
would be a multiple of the base unit */ 
margin: lem 0; 
/* Padding top and bottom is 12px each, total = 24px */ 
padding: lem 0; 
图 9-23 显示 了 为 这 些 标记 应 用 这 个 样式 后 
的 效果 。 
如 果 重 写 其 他 地 方 的 这 些 元 素 的 字号 ， 网 格 
就 会 变 乱 。 对 于 使 用 像素 的 垂直 韵律 ， 未 设置 的 
元 素 也 会 出 现 相同 的 问题 。 


3. 设置 网 格 


如 果 把 网 格 图 像 设置 为 背景 ， 用 于 即时 的 可 
视 化 验证 ， 那 么 定义 基线 网 格 的 这 个 过 程 就 会 简 
单 许多 。 这 有 许多 方式 ， 但 在 所 有 的 方式 中 ， 都 需要 提供 基本 单位 。 

@ ”使 用 插件 ，gridBuilder(http://gridbuilder kilianvalkhof.com/) 会 根据 提供 的 选项 生成 一 幅 图 像 ， 

接着 把 这 幅 图 像 设 置 为 背景 图 像 。 

”使 用 CSS 渐变 ， 以 这 种 方式 使 用 重复 的 渐变 来 建立 网 格 背 景 图 像 。 

e@ ”使 用 书签 工具 : 使 用 书签 工具 (http://peol.github.com/960gridder/) 的 页 面 上 会 显示 网 格 。 


There were four of us—George, and William Samuel Harris, 
and myself, and Montmorency. We were sitting in my room, 
smoking, and talking about how bad we were—bad from a 
medical point of view I mean, of course. 


We were all fecling weedy, and we were Beting quite nervous abhoutiL Hants said be fek such 
rpmordipary fis of giddiness come over him at imes, that be hardly knew what he was 
Soing; and then Geompe said that he had fis of giddiness too, and hardly knew what he was 
Soing. Wi me, it was my liver that was out of order. 


ee eee et re mene he area ne spa ne po rie he we deted 
De eos gmpemm Wy A een dd eben Wh er wm om ef eer id om 加 


图 9-23 ”为 标记 应 用 样式 后 的 效果 
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CSS3 对 字体 的 调整 提供 了 许多 支持 。 下 面 介绍 在 CSS3 中 处 理 字体 的 一 些 方式 。 


[aa 使 用 Css3 控制 文本 格式 


9.6.1 控制 文本 溢出 

文本 溢出 到 块 容器 外 (没有 把 溢出 设置 为 可 见 ) 时 ， 属 性 text-overflow 可 以 控制 如 何 剪 切 溢出 的 
文本 。 这 个 属性 可 以 在 如 下 情形 下 触发 : 

@” 块 元 素 的 white-space 属性 设置 为 nowrap。 

e 单词 长 度 大 于 块 容器 的 宽度 (针对 水 平 书写 的 语言 ， 例 如 英语 )。 

可 以 剪 切 溢出 的 文本 , 或 者 在 前 几 个 可 见 字符 后 显示 省 略 号 (.….)， 如 图 9-24 所 示 。 表 9-14 列 出 
了 text-overflow 的 浏览 器 支持 情况 。 


HTMLS is a language for struct... 
图 9-24 ”text-overflow: ellipsis 的 效果 


表 9-14 ”text-overfiow 的 浏览 器 支持 情况 
EE | Fe | san | chome | open 
7.9 9+ 0+ 


9.6.2 ”从 基线 开始 垂直 对 齐 文本 


vertical-align 属性 允许 相对 于 父 元 素 设置 内 联 元 素 的 位 置 。 默 认 情况 下 ， 内 联 元 素 (例如 b、i、 
em、img、strong 等 ) 与 父 元 素 的 基线 对 齐 。 但 可 以 调整 内 联 元 素 的 位 置 ， 以 匹配 以 下 几 个 选项 : 
baseline( 默 认 )、sub、super、top、text-top、middle、bottom、text-bottom、inherit。 还 可 以 用 长 度 单 
位 和 百分数 设置 它们 ， 例 如 : 


sup { vertical-align: 3096; } 
图 9-25 显示 了 一 个 例子 : 字符 “1” 的 vertical-align 设置 为 行 高 的 30%， 所 以 显示 在 上 方 。 
表 9-15 列 出 了 vertical-align 的 浏览 器 支持 情况 。 


图 9-25 ”从 基线 开始 垂直 对 齐 文本 
如 果 和 希望 字符 相对 于 基线 上 升 /下 降 某 个 固定 的 值 ， 就 可 以 使 用 长 度 单 位 。 
sup { vertical-align: 20px; } 
表 9-15 vertical-align 的 浏览 器 支持 情况 


IE Firefox Safari Chrome Opera 
号 4 十 1.0+ 1.3+ 2.0+ 92+ 
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CSS3 重新 定义 了 vertical-align 的 取 值 ， 主 要 是 为 了 考虑 除 英语 外 的 其 他 


9.6.3 ”控制 单词 中 各 个 字符 之 间 的 空白 


百 。 


letter-spacing 允许 设置 文本 中 两 个 字符 之 间 的 距离 。 负 值 表示 两 个 字符 的 间距 会 收缩 。 图 9-26 
是 一 个 例子 ， 表 9-16 列 出 了 浏览 器 支持 情况 。 


P {letter-spacing: Spx: } 


在 CSS 中 ， 只 能 设置 统一 的 字符 间距 ， 在 文本 的 两 组 字符 之 间 添 加 相同 的 间距 。 要 调整 不 同 字 
符 组 的 间距 ， 可 以 使 用 letteringjs(http://letteringjs.cony)， 这 是 一 个 jQuery 插件 ， 它 把 每 个 字符 放 在 
一 个 带 类 名 的 span 元 素 中 , 接着 可 以 使 用 span 元 素 调整 每 个 字符 的 设置 。 图 9-27 显示 了 一 个 例子 。 


[1 
Letter Spacing Set 


图 9-26 letterspacing: 5px 的 效果 


图 9-27 使 用 letteringjs 后 的 效果 
表 9-16 letter-spacing 的 浏览 器 支持 情况 
| Fretox | san | chome | 
ss+ [La | 2z0 | 
9.6.4 ”调整 字 间 距 
word-spacing 指定 两 个 字 之 间 的 距离 。 负 值 表示 字 间 距 的 缩小 。 表 9-17 列 出 了 浏览 器 支持 情况 
h2 { word-spacing: 2px; } 
也 可 以 如 下 方式 在 块 元 素 上 创造 性 地 使 用 这 个 属性 ， 防 止 空白 影响 它们 的 位 置 


(http://jsfiddle.net/nimbu/UrLBK/)， 如 图 9-28 所 示 。 
图 9-29 显示 了 另 一 个 例子 。 


Word Spacing Default 
Word Spacing Set 
图 9-28 一 个 示例 


图 9-29 ”word-spacing: 20px 的 效果 


表 9-17 word-spacing 的 浏览 器 支持 情况 
| 3 Firefox Safari Chrome Opera_ 
6+ i Lt 
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9.6.5 ” 打 断 长 单词 


如 果 句 子 包含 一 个 不 可 打 断 的 单词 (例如 "antidisestablishmentarianism")， 即 使 超出 容器 的 宽度 ， 
浏览 器 通常 也 会 把 它 显示 在 同一 行 上 。 使 用 word-wrap: break-word 可 以 告诉 浏览 器 , 如 果 单词 过 长 ， 
超出 容器 的 宽度 ， 就 打 断 它 。 图 9-30 显示 了 一 个 示例 ， 第 一 个 单词 太 长 ， 超 出 容器 的 宽度 ， 为 第 二 
个 单词 使 用 了 word-wrap:break-word， 所 以 它 被 打 断 以 适应 容器 的 宽度 。 表 9-18 列 出 了 word-wrap: 
break-word 的 浏览 器 支持 情况 。 


h2 { word-wrap: break-word: } 


Antidisestablishmentarianism 


Antidisestablish 
mentarianism 


9-30 ”word-wrap: break-word 的 效果 


表 9-18 ”word-wrap 的 浏览 器 支持 情况 
5 os 


9.6.6 ”控制 空白 和 换行 符 


white-space 属性 仅 选择 如 下 取 值 之 一 ， 为 选 定 元 素 处 理 文本 中 的 空白 。 

normal: 根据 需要 压缩 空白 和 换行 符 ， 以 填 满 容器 ( 且 不 显示 换行 符 )。 
nowrap: 压缩 空白 ， 但 不 打 断 行 。 

pre: 不 压缩 空白 ， 仅 在 文本 中 有 换行 符 或 生成 的 内 容 "A" 时 打 断 行 。 
pre-wrap: 与 pre 相同 ， 但 如 果 显示 换行 符 ， 就 在 需要 时 打 断 行 ， 以 填 满 容器 。 
pre-line: 与 pre-wrap 相同 ， 但 也 压缩 空格 和 制 表 符 。 

图 9-31 显示 了 一 个 例子 ， 表 9-19 列 出 了 浏览 器 支持 情况 。 


Twinkle Twinkle - 


Twinkle Twinkie - 
Twinkle ， 
Twinkle - 
Twinkle 
Twinkle - 


Twinkle 
Twinkle - 


indicates white space that is maintained. 


图 9-31 white-space 属性 和 所 有 可 用 取 值 的 效果 
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表 9-19 white-space 的 浏览 器 支持 情况 


IE Firefox Safari Chrome Opera 
8+ 3.5+ 13+ 20+ 92+ 
9.6.7 ”打印 断 字 


多 年 来 ，Web 设计 人 员 一 直 在 尝试 找到 一 种 解决 方法 ， 用 连 字 符 调整 文本 。 幸 好 ,在 CSS 中 做 
的 大 量 工作 可 以 对 连 字 符 进 行 一 些 控制 了 。 


1. 断 字 


使 用 hyphens 属性 ， 可 以 控制 连 字符 的 显示 ， 可 用 取 值 如 下 。 

@ none: 单词 不 被 打 断 到 多 个 行 上 。 

emanual: 如 果 单词 中 有 换行 符 ， 例 如 软 连 字符 (&shy:) 或 连 字号 (CD)， 单 词 就 被 打 断 到 多 个 行 上 。 

e@ auto: 单词 在 相应 的 断 字 处 打 断 。 注 意 浏览 器 需要 知道 使 用 断 字 的 文本 所 用 的 语言 ， 所 以 这 
个 取 值 只 能 用 于 声明 了 对 应 语言 的 文本 (在 父 元 素 上 用 lang 特性 声明 ， 父 元 素 可 以 是 html 
或 body)， 以 及 有 正确 断 字 资 源 的 浏览 器 。 


h2 { hyphens: auto; } 
图 9-32 是 一 个 例子 ， 表 9-20 列 出 了 浏览 器 支持 情况 。 


Publication as a Work- 
ing Draft Words can 
be broken at appropr- 
alte hyphenation points 
elther as determined 
by hyphenation char- 
acters inside the word 
or as delermined auto- 
matically by a 
language-appropriate 


hyphenation resource. 


图 9-32 hyphens: auto 的 效果 
注意 : hyphens 属性 的 初始 值 是 manual。 对 于 自动 断 字 的 单词 ， 这 个 属性 应 设置 为 auto。 
表 9-20 RE 
er 
2. 软 连 字符 
软 连 字符 (在 HTML 实体 中 表示 为 &shy:) 用 于 告诉 浏览 器 ， 单 词 可 以 在 哪里 打 断 。 它 不 是 一 个 
CSS 属性 ， 但 目前 是 在 所 有 浏览 器 中 实现 断 字 的 唯一 方式 。 下 面 的 段落 使 用 了 软 连 字符 : 


A slightly longer but less commonly accepted variant of the word can be found in the Duke Ellington song "You're Just an Old 
Antidisestablish&cshy:mentarianismist"[3] although the corect construction of that word would be "antidisestablish&cshy: mentarianist" 
(without the "ism"). 
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当 不 需要 软 连 字符 时 ， 这 个 段落 就 显示 为 一 个 完整 的 段落 ， 如 图 9-33 所 示 。 


图 9-33 软 连 字符 在 不 需要 时 不 显示 (这 两 段 是 相同 的 ) 
一 旦 单词 开始 被 打 断 ， 带 软 连 字 符 的 单词 就 会 不 同 ， 如 图 9-34 所 示 。 


图 9-34 单词 遇 到 换行 符 ， 需 要 被 打 断 时 ， 就 会 显示 软 连 字符 
表 9-21 列 出 了 软 连 字 符 的 浏览 器 支持 情况 。 
表 9-21 软 连 字符 的 浏览 器 支持 情况 


上 | Feox | sm | chme | over 
ss | ai | im | in | sc 


9.6.8 ”控制 文本 标点 符号 


1. 控制 文本 引号 字形 


使 用 quotes 属性 可 以 给 每 一 级 引号 设置 用 于 左右 引号 的 字形 (从 最 外 层 到 最 里 层 )。 接 着 使 用 
content 属性 和 左右 引号 关键 字 ， 可 以 给 每 个 选择 器 设置 引号 。 

标记 : 

<blockquote><p>Imagine a puddle waking up one moming and thinking, <q>This is an interesting world I find myselfin 一 an 
interesting hole I find myselfin — fits me rather neatly, doesn't it?</q></p></blockquote> 

blockquote { quotes: "+"":" "<" ">";} 

blockquote::before. 
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dbefore { content: open-quote: } 
blockquote:-after, 
qiafter { content: close-quote: } 


图 9-35 显示 了 得 到 的 文本 (引号 字形 用 黑色 表示 )。 表 9-22 列 出 了 浏览 器 支持 情况 。 


图 9-35 定制 的 引号 字形 


表 9-22 quotes 的 浏览 器 支持 情况 


2. 悬挂 标点 符号 


在 文档 布局 工具 中 ， 一 般 可 以 设置 标点 符号 ， 使 它们 不 会 破坏 文本 流 。 但 这 在 浏览 器 中 是 不 可 
能 做 到 的 。 在 CSS3 中 可 以 通过 hanging-punctuation 属性 做 到 ， 它 有 以 下 几 个 取 值 。 

e@ none: 不 悬挂 任何 字符 。 
first: 在 元 素 的 第 一 个 格式 化 行 中 ， 开 头 的 左 方 括号 或 左 引号 被 悬挂 。 图 9-36 是 一 个 例子 。 
last: 在 元 素 的 最 后 一 个 格式 化 行 中 ， 结 尾 的 右 方 括号 或 右 引号 被 悬挂 。 
force-end: 行 尾 的 句号 或 逗号 被 悬挂 ， 图 9-37 是 一 个 例子 。 
allow-end: 如 果 不 悬 挂 就 会 使 文本 不 匹配 之 前 的 对 齐 方式 ， 那 么 悬挂 行 尾 的 句号 或 逗号 。 
使 用 方式 如 下 : 
p{ 

hanging-punctuation: allow-end; 

} 


e@ hanging-punctuation: 设置 它 ， 表 示 对 行 中 的 文本 进行 调整 、 对 齐 时 不 考虑 悬挂 。 


9-36 hanging-punctuation: first 的 效果 9-37 hanging-punctuation: force-end 的 效果 


9.6.9 控制 非 拉 丁 Web 字体 的 显示 


CSS3 引入 了 许多 新 属性 ， 对 非 拉丁 类 型 Web 字体 的 样式 化 允许 更 大 的 灵活 性 。 下 面 介 绍 几 个 
这 样 的 属性 。 
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1. word-break 


设置 单词 跨行 显示 时 如 何 打 断 。 下 面 是 可 用 取 值 。 

enormal， 人 允许 在 字 内 换行 。 

e@ ”break-all: 每 个 单词 中 的 断 字 会 溢出 容器 的 宽度 。 只 有 当主 要 使 用 CJK( 中 文 、 日 文 和 韩文 脚 
本 的 简写 ) 字 符 且 文本 会 跨行 显示 时 ， 这 个 值 才 有 效 。 

e@ ”keep-all: CJK 字符 有 隐 含 的 打 断 点 ， 但 使 用 这 个 值 时 ， 不 会 应 用 这 些 打 断 点 。 这 个 值 表示 
单词 不 被 打 断 (等 价 于 其 他 脚本 的 normal)。 


2. text-emphasis 

在 CIK 脚本 中 , 重音 用 重音 字符 旁边 的 小 符号 表示 。 可 以 使 用 4 个 属性 对 这 些 符 号 设置 样式 和 

显示 它们 。 

@ ”text-emphasis-style: 这 个 属性 允许 设置 用 于 重音 的 符号 种 类 。 可 以 从 可 用 的 关键 字 中 选择 ， 
或 者 把 自己 的 字符 设置 为 要 使 用 的 符号 。 

jh2 em { text-emphasis-style: doublercircle: } 

e@ ”text-emphasis-color: 这 个 属性 可 以 使 这 些 重音 符号 与 主体 文本 有 不 同 的 颜色 。 

h2 em { text-emphasis-color: red; } 

”text-emphasis-position: 这 个 属性 允许 指定 把 重音 符号 放 在 什么 地 方 。 

e@ text-emphasis: 这 个 快捷 属性 允许 设置 text-emphasis-style 和 text-emphasis-color。 但 是 ， 
text-emphasis-position 取决 于 文本 的 语言 , 而 且 是 继承 的 (因为 只 需要 设置 一 次 )。 下 面 演 示 了 
text-emphasis 的 用 法 (在 Chrome 或 Safari 5.1 中 查看 ): 
h2 em { text-emphasis: double-circle indianred: } 

目前 只 有 Chrome 和 Safari 5.1+ 支 持 text-emphasis， 且 带 有 -webkit- 前 级 。 


9.6.10 ”使 用 连 字 和 其 他 OpenType 字体 功能 


OpenType 格式 提供 了 许多 其 他 字体 功能 ， 它 们 通常 只 能 通过 Adobe InDesign 等 应 用 程序 使 用 。 
在 CSS3 中 ,这些 功能 现在 可 由 Web 开发 人 员 使 用 。 实 现时 ， 可 以 在 文本 中 使 用 连 字 、swsh、smep 
和 表格 数字 。 语 法 如 下 : 
h2.fancy{ 
/* enable small caps and use second swash altemate */ 
font-feature-settings: "smcp", "swsh" 2; 
} 
smcp 和 swsh 是 区 分 大 小 写 的 OpenType 功能 标记 。 完 整 的 标记 列表 可 以 在 OpenType 规范 
(www.microsoft.com/typography/otspec/featurelist.htm) 中 找到 。swsh 旁边 的 值 2 表示 要 选择 的 字形 
索引 。 
Firefox 4 实现 的 font-feature-settings 略 有 区 别 : 
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lfancy{ 
-moz-font-feature -settings: "smep=1.swsh=2"; 
} 


表 9-23 列 出 了 字体 功能 的 浏览 器 支持 情况 。 
表 9-23 字体 功能 的 浏览 器 支持 情况 


IE Firefox 一 和 一 Chrome Opera 
10+ 4.0+ 16.0+ # 
本 章 小 结 


本 章 介绍 了 如 何 使 用 CSS 控制 文本 与 字体 ， 讨 论 了 @font-face 的 演变 过 程 ， 以 及 在 页 面 上 调 
整 字 体 的 显示 效果 ;还 介绍 了 如 何 使 用 相对 和 绝对 单位 设置 字体 ， 简 要 介绍 了 控制 非 拉 丁字 体 的 一 
些 属性 ; 最 后 介绍 了 使 用 CSS3 调整 字体 、 字 体 大 小 、 字 体 粗细 、 颜色 以 及 调整 Web 文本 的 外 观 等 。 


[区 | 思考 和 练习 


1. 在 本 练习 中 ， 要 求 继续 构建 Example Cafe 网 站 。 打 开 index.html 页 面 ， 在 <body> 开 始 标签 和 
</body> 结 束 标签 之 间 添 加 一 个 <div> 元 素 。 然 后 为 该 <div> 元 素 添加 id 特性 ， 并 取 值 为 page。 在 该 
网 站 的 每 个 页 面 中 重复 此 操作 。 不 必 考 虑 截图 中 的 尺寸 ， 但 应 确保 在 单元 内 具有 内 边 距 ， 在 外 部 包 
围 有 边框 。 白 色 边 框 由 正 默认 创建 。 

(1) 在 样式 表 中 添加 一 条 规则 , 为 元 素 添加 外 边 距 、 边框 以 及 内 边 距 , 从 而 使 边框 效果 如 图 9-38 

(2) 创建 一 条 CSS 规则 ， 使 其 能 够 对 导航 栏 进行 如 下 修改 ， 在 顶部 与 底部 添加 一 条 单 像素 灰色 
边框 。 在 灰色 边框 上 下 添加 20 像素 的 外 边 距 。 在 盒子 的 顶部 与 底部 添加 10 像素 的 内 边 距 。 为 导航 
栏 中 每 个 链接 的 右 侧 添加 外 边 距 。 

(3) 为 首页 上 的 主题 图 片 添加 class 特性 ， 并 取 值 为 main_ image。 然 后 创建 一 条 规则 ， 为 图 片 添 
加 一 条 单 像素 边框 ， 并 且 在 边框 的 右 侧 与 底部 添加 10 像素 的 外 边 距 。 

(4) 增加 段落 内 每 个 文本 行 的 间距 至 1.3em。 

2. 创建 tableStyles.css 样式 表 ， 使 其 能 够 让 上 一 练习 的 效果 如 图 9-39 所 示 。HTML 代码 如 下 : 


<!DOCTYPE html> 


第 9 章 文本 与 字体 


example 
cafe 


Ee ER Ven Haoy Boomals IJook Hep 党 


[Quantity [ingreaient] 
3 Eggs 

100m Milk 

200g Spinach 
1pinch ”Cinnamon 


图 9-38 ”网 页 边框 效果 


图 9-39 ”应 用 了 tableStyles.css 样式 表 的 网 页 效果 
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第 10 章 


应 用 CSS3 的 属性 


到 目前 为 止 ， 本 书 已 经 介绍 了 CSS 基础 知识 ， 你 了 解 了 新 的 选择 器 、 应 用 了 Web 字体 ， 并 且 
概览 了 Web 文档 的 排版 。 现 在 ， 是 时 候 应 用 更 多 的 CSS3 属性 ， 并 将 这 些 设计 巧妙 的 属性 添加 到 网 
站 中 了 。 

本 章 将 介绍 新 的 颜色 、 透 明度 以 及 背景 属性 ， 此 外 还 会 展示 如 何 应 用 多 重 背 景 、 边 框 、 阴 影 和 
渐变 。 


本 章 的 学 习 目 标 : 

@ 了解 如 何在 网 页 中 设置 颜色 与 透明 度 

掌握 背景 裁 前 、 多 重 背景 以 及 设置 背景 尺寸 的 选项 
如 何不 利用 图 片 创建 投影 及 圆 角 

如 何 应 用 CSS3 的 属性 为 边框 添加 图 像 

了 解 CSS3 的 渐变 功能 


颜色 与 透明 度 


我 们 习惯 在 样式 表 中 使 用 关键 字 (red 或 blue) 或 十 六 进 制 代码 (ftff 或 #fffffp 来 表示 颜色 值 ， 
CSS3 颜色 模块 引入 了 两 种 写 入 颜色 值 的 新 方式 : RGBa 和 HSLa， 在 决定 使 用 哪 一 种 方式 之 前 ， 首 
先 介绍 RGB 和 HSL 之 间 的 区 别 。 


10.1.1 RGB 


RGB 描述 了 一 种 红 、 绿 、 蓝 颜色 模型 ， 在 这 个 模型 中 创建 颜色 时 使 用 三 个 数值 表示 一 种 颜色 。 
RGB 是 一 种 加 性 颜色 模型 , 一 种 颜色 由 三 原色 相 加 得 到 , 也 就 是 用 这 三 个 值 进行 十 六 进 制 乘法 运算 ， 
区 别 仅 在 于 颜色 值 表示 的 方式 不 同 。RGB 用 0~255 之 间 的 数 表示 颜色 值 ， 图 10-1 展示 的 是 在 
Photoshop 颜色 拾取 器 中 指定 的 RGB 值 。 

用 CSS 可 以 按照 如 下 三 种 不 同 的 方式 之 一 来 描述 颜色 (例如 纯 蓝 色 ): 名 称 、 简 写 形式 的 十 六 进 
制 代 码 和 全 写 形式 的 十 六 进 制 代码 。 
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color #00000E: 


为 了 用 RGB 实现 颜色 ， 可 以 使 用 关键 字 rgb， 紧 接 rgb 之 后 的 是 位 于 括号 中 的 RGB 值 。 为 了 
用 RGB 描述 颜色 ， 可 以 用 数字 或 百分比 形式 的 值 表示 红色 、 绿 色 和 蓝 色 。RGB 值 实际 上 是 CSS 2.1 
的 一 部 分 ， 但 是 直到 最 近 也 没有 得 到 广泛 应 用 。 在 下 面 的 例子 中 ， 既 有 数字 形式 的 值 ， 也 有 百分比 
形式 的 值 。 

color rgb(0,0,255); 

color reb(0,0,100%%); 

M* color: rgb(red, green, blue); */ 


注意 : 
不 仅 可 以 通过 color 属性 来 使 用 rgb， 在 CSS 中 也 可 以 在 任何 声明 磊 色 值 的 地 方 使 用 Tgb， 比 如 
background 和 border-color。 


RGB 值 可 以 被 IE6、Safari 3、Firefox 3、Chrome 和 Opera 10 以 上 版 本 的 所 有 浏览 器 支持 。 
i 
的 Ce 


ny Web cabm 


图 10-1 ”Photoshop 颜色 拾取 器 中 的 RGB 值 


10.1.2 ”RGBa 透明 度 

通过 给 color 属性 添加 第 四 个 值 ， 就 可 以 控制 透明 度 。RGBa 中 的 “a” 表 示 alpha， 作 用 和 在 
Photoshop 中 修改 alpha 通道 相同 。 

为 了 实现 RGBa， 需 要 将 关键 字 rgb 改 为 rgba， 这 样 就 可 以 允许 我 们 设置 透明 度 ，“a” 的 值 通 
过 0 到 1 之 间 的 数 来 设置 (其 中 0 表示 完全 透明 ，1 表示 完全 不 透明 ), 值 0.6 相当 于 将 透明 度 设 置 为 
60%。 


color: rgba(0.0.255.0.6): 
* color: rgba(red, green, blue. alpha); */ 


图 10-2 展示 的 是 从 完全 不 透明 到 完全 透明 之 间 不 同 的 RGBa 透明 度 。 


a 


图 10-2 起 作用 的 RGBa 透明 度 
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浏览 器 对 RGBa 的 支持 不 如 对 RGB 的 支持 那么 广泛 , 除 正 6~JE8 外 , RGBa 可 以 被 上 述 所 有 浏 
览 器 支持 ， 但 是 正 9 可 以 支持 RGBa。 为 了 迎合 那些 低 性 能 浏览 器 ， 在 样式 规则 中 增加 了 纯色 备 选 
方案 。 

af 

colorrgb(0.0255): /* Fallback for less capable browsers */ 
colorrgba(0.0255.0.6): 

} 

为 浏览 器 应 用 它们 所 能 理解 的 最 后 一 个 属性 ， 所 以 在 最 后 添加 了 关键 字 rgb， 确 保 高 性 能 浏览 
器 可 以 应 用 透明 度 。 那 些 无 法 理解 RGBa 的 浏览 器 只 是 忽略 关键 字 rgba， 并 以 它们 可 理解 的 方式 来 
实现 color 属性 (第 一 个 颜色 值 )。 在 不 能 使 用 纯色 的 情况 下 ， 只 需要 按照 同样 的 方式 增加 一 幅 PNG 
图 像 即 可 。 

article { 

background:url(white50.png); /* Fallback forless capable browsers */ 
background:regba(255.255.255.0.6); 

} 

具有 不 使 用 图 像 就 可 以 编辑 透明 度 的 能 力 意味 着 还 可 以 将 透明 度 应 用 于 边框 和 轮廓 。 此 外 ， 当 
需要 进行 修改 时 ， 只 需要 编辑 CSS 代码 ， 这 比 返回 Photoshop 中 修改 多 幅 图 像 要 容易 和 快速 得 多 。 
最 后 ， 幸 运 的 是 还 能 减少 对 服务 器 的 请 求 数量 (因为 不 必 加 载 图 像 )， 从 而 让 网 站 更 加 快速 。 


10.1.3 HSLa 


用 CSS3 添加 颜色 的 另 一 种 方法 是 使 用 HSLa( 色 度 、 饱 和 度 、 亮 度 和 alpha)，HSL 比 RGB 更 直 

观 。 可 以 想象 一 个 色 轮 来 猜测 初始 颜色 ， 然 后 调整 饱和 度 和 亮度 ， 直 到 找到 所 需 颜色 的 明暗 度 。 色 

度 值 由 0 一 360" 之 间 的 值 表示 ， 看 一 下 如 图 10-3 所 示 的 色 轮 ， 我 们 可 以 看 到 红色 由 0? 和 360° 表 示 ， 
每 隔 120" 是 其 他 两 种 主 色 (绿色 =120"， 蓝 色 =240?)。 
红色 
so 


品 红色 黄色 
60° 
255,0,255 255,255,0 
ee 0,255,0 


1807 
0,255,255 


图 10-3 HsLa 色 轮 


HSL 标记 的 第 二 个 值 表示 饱和 度 ， 或 者 说 某 种 颜色 的 强度 ， 它 由 一 个 相对 于 灰色 的 百分比 值 描 
述 ， 其 中 0 表示 灰 度 ，100% 表 示 全 饱和 。HSL 标记 的 第 三 个 值 表示 亮度 ， 也 由 一 个 百分比 值 描述 ， 
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其 中 0 表示 黑色 ，50% 表 示 正 常 亮 度 ，100% 表 示 白 色 。 

为 了 用 HSLa 获取 纯 红色 ,需要 组 合 使 用 色 度 值 (0 或 360”)、 饱 和 度 值 (100%, 全 饱和 ) 和 亮度 值 
(50%， 正 常 亮度 )。 另 外 ， 要 将 alpha 通道 设 为 |， 以 保证 颜色 是 完全 不 透明 的 。 

sla(0.10096.5096.1) 

:hsla (hue. saturation. lightness. alpha) */ 


注意 日 
HSLa 的 颜色 值 是 通过 混合 度数 和 百分比 值 ， 再 加 上 alpha 通道 得 到 的 。 


图 10-4 展示 了 一 些 通过 分 别 编辑 色 度 值 、 饱 和 度 值 、 亮 度 值 和 alpha 值 ， 使 纯 红色 产生 变化 的 
例子 。 


HSLa, hue variations at 60 degree intervals 


国 ” ”” 加 到 到 


HSLa saturation variations 


HSLa lightness varations 
100% 


HSLa, alpha variations 


1 075 025 0 


图 10-4 使 用 HSLa 产生 颜色 变化 的 示例 


同 RGBa 一 样 ， 除 正 6~IE8 外 ，HSLa 可 以 被 大 多 数 主流 浏览 器 所 支持 。 
对 于 只 使 用 CSS 进行 工作 的 设计 者 而 言 ， 计 算 RGB 值 比较 困难 。 相 对 而 言 ，HSL 允许 根据 色 
度 选择 一 种 颜色 ， 然 后 用 饱和 度 和 亮度 进行 精细 调整 。 


10.1.4 不 透明 度 


使 用 alpha 通道 并 不 是 创建 透明 元 素 的 唯一 方法 ， 另 一 种 方法 是 使 用 opacity 属性 。 它 与 RGBa 
或 HSLa 中 alpha 通道 的 工作 方式 类 似 ， 该 属性 接收 0 到 1 之 间 的 一 个 值 一 一 不 同 之 处 在 于 该 属性 
只 能 接收 这 个 值 ， 这 意味 着 仍然 需要 用 其 他 属性 (比如 background-color 或 coloD 声 明 颜色 。 为 了 将 
article 元 素 的 背景 设 为 50% 不 透明 ， 可 以 这 样 做 : 


正如 在 图 10-5 中 看 到 的 那样 ， 这 样 做 的 问题 是 : 一 旦 设置 opacity 属性 ， 就 会 影响 到 父 元 素 包 
会 的 所 有 子 元 素 的 透明 度 。 相 反 ，RGBa 和 HSLa 只 会 影响 其 所 应 用 的 元 素 和 属性 。 
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Miss Bakers Historic Flight 


素 不 具有 不 透明 度 ， 右 图 中 的 article 元 素 具有 50% 的 不 透明 度 


如 果 可 以 选择 的 话 ， 通 常 使 用 RGBa 或 HSLa 来 添加 透明 度 。 如 果 想 要 一 个 元 素 在 和 用 户 发 生 
交互 之 前 能 够 逐渐 融入 背景 ， 比 如 广告 或 表单 ， 那 么 opacity 属性 就 很 实用 。 
在 使 用 和 修改 opacity 属性 的 值 时 ， 如 果 能 结合 使 用 :hover 或 :focus 之 类 的 伪 类 ， 就 会 产生 不 错 
的 效果 。 也 可 以 将 其 应 用 于 已 访问 链接 ， 这 样 一 旦 链接 被 访问 ， 就 将 逐渐 融入 背景 。 用 RGBa 或 
HSLa 也 可 以 得 到 同样 的 效果 ， 但 是 如 果 网 站 上 的 链接 具有 多 种 颜色 ， 那 么 使 用 opacity 属性 会 将 所 
有 链接 设置 为 同样 的 效果 ， 而 不 必 为 每 种 颜色 的 实例 编写 规则 。 
arvisited { 
opacity:0.5; 
} 
图 10-6 展示 了 应 用 opacity 属性 后 已 访问 链接 的 效果 ， 本 例 中 的 链接 是 “many animals were 
propelled heavenwards ”。 
efore humans were launched into space, many animals were propelled 
heavenwards to pave the way for mankind's pioneering endeavours. These 


original pioneers, including numerous monkeys, served their nations in order to 
investigate the biological effects of space travel. 


图 10-6 具有 50% 不 透明 度 的 已 访问 链接 


注意 ， 除 了 IE6~8IE 之 外 ，opacity 属性 可 以 在 所 有 浏览 器 中 起 作用 。 在 下 中 有 一 些 特殊 的 过 
滤器 ， 可 以 用 来 使 opacity 属性 起 作用 ， 但 这 些 过 滤器 只 作为 最 后 的 手段 使 用 。 


加 网 背景 


CSS3 最 有 趣 且 具有 许多 不 同 实现 的 模块 之 一 就 是 Background and Borders 模块 ， 现 在 它 是 一 个 
候选 的 推荐 模块 。 在 本 章 稍 后 我 们 将 回 过 头 来 介绍 边框 ， 现 在 先 介绍 背景 裁 前 、 多 重 背景 以 及 设置 
背景 尺寸 的 选项 。 


10.2.1 background-clip 属性 


我 们 已 经 习惯 于 看 到 背景 会 在 其 边框 内 进行 拉 伸 ， 如 图 10-7 所 示 ， 而 Background and Borders 
模块 中 引入 的 background-clip 属性 可 以 指定 背景 是 否 要 在 其 边框 内 进行 拉 伸 。 
background-clip 属性 可 以 设置 为 如 下 三 个 值 之 一 : 
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borderbox & padding-box content-box 
当 没 有 声明 background-clip 属性 的 值 时 ，border-box 是 其 默认 值 。 
如 果 将 该 属性 的 值 设置 为 padding-box， 那 么 背景 会 被 裁剪 至 边框 内 部 显示 。 


#introduction { 
borderspx dashed reb(255.0.0); 
background:rgba(255,255.255.0.7) wl(img/bg-moon jpg) 50% 50%; 
padding:0 20px; 
color:rgb(255,255,255); 
-moz-background-clip:padding; 
background-clip:padding-box: 
} 
图 10-8 展示 了 在 边框 内 部 显示 的 背景 。Opera 10.5+、IE9+、Safari 5+、Firefox 4+ 和 Chrome 5+ 
在 实现 background-clip 属性 时 ， 都 没有 采用 厂商 前 级 。 
第 三 个 值 content-box 则 将 背景 裁剪 至 盒子 模型 的 内 容 区 域 ， 如 图 10-9 所 示 ， 即 内 边 距 以 内 的 
区 域 。 
#introduction { 
‘border:5px dashed rgb(255,0,0); 
background:url(img/bg-moon jpg) 5096 5096: 
padding:0 20px; 
color:reb(255,255,255); 
background-clip:content-box; 


图 10-8 具有 padding-box 值 的 应 用 效果 


图 10-9 具有 content-box 值 的 应 用 效果 


10.2.2 ”background-origin 属性 
background-origin 属性 允许 我 们 为 给 定 的 元 素 指定 背景 位 置 的 起 始点 ， 它 能 接收 的 值 与 
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background-clip 属性 相同 。 例 如 ， 如 果 背 景 被 定位 于 左上 角 (0.0)， 那 么 默认 值 padding-box 会 将 背景 
定位 于 内 边 距 的 外 边缘 ( 即 边框 的 内 边缘 )， 如 图 10-10 所 示 。 


#introduction { 
border:Spx dashed rgb(255.0.0); 
background:url(img/bg-moon jpg) 0 0: 
padding:0 20px; 
colorfEEE 
background-clip:border-box; 
background-origin:padding-box; 


图 10-10 具有 padding-box 值 的 应 用 效果 


border-box 值 会 将 背景 定位 于 边框 的 外 边缘 ， 如 图 10-11 所 示 。 


#introduction { 
border:Spx dashed rgb(255.0,0); 
background:url(img/bg-moon.jpg) 0 0: 
padding:0 20px; 
colorfEEE 
background-clip:border-box: 
background-origin:border-box: 

} 


最 后 一 个 可 被 background-origin 属性 接收 的 值 是 content-box， 该 值 将 背景 的 起 点 设置 为 内 容 区 
域 的 边缘 或 者 内 边 距 的 内 边缘 ， 如 图 10-12 所 示 。 


#introduction { 
border:Spx dashed rgb(255.0.0): 
background:url(img/bg-moon.jpg) 0 0; 
padding:0 20px; 
color#ffE: 
background-clip:border-box: 
background-origin:content-box; 
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图 10-11 具有 border-box 值 的 应 用 效果 图 10-12 具有 content-box 值 的 应 用 效果 


Opera、Safari、Firefox、Chrome 和 IE9 都 内 置 支持 background-origin 属性 。 


10.2.3 background-size 属性 


background-size 属性 可 被 用 来 简化 自 互 联网 出 现 之 日 网 页 设计 师 就 全 力 解决 的 问题 之 一 ， 这 个 
问题 是 指 : 不 管 浏览 器 窗口 大 小 或 屏幕 分 辨 率 ， 不 依赖 于 Flash 或 JavaScript 就 能 获得 实际 大 小 的 背 
景 图 像 。 解 决 该 问题 的 方案 ，background-size 属性 。 

顾名思义 ， 该 属性 允许 在 X 轴 ( 水 平 ) 和 YY 轴 (垂直 ) 两 个 方向 上 指定 从 容器 一 边 到 另 一 边 的 背景 
图 像 的 尺寸 ， 这 意味 着 如 果 正 在 创建 流 式 设计 ， 就 可 以 用 background-size 属性 来 确保 所 使 用 的 背景 
图 像 可 以 根据 视 口 大 小 或 浏览 器 宽度 进行 缩放 。 

该 属性 可 以 接收 宽度 和 高 度 两 个 值 ， 还 可 以 接收 关键 字 auto、contain 和 cover， 宽 度 值 和 高 度 
值 可 以 用 像素 或 百分比 表示 。 第 一 个 值 是 宽度 ， 第 二 个 值 是 高 度 。 将 background-size 属性 的 值 设 为 
85% 的 效果 如 图 10-13 所 示 。 

html { 

background-image:url(img/earthl .jpg); 
background-position:50% 50%; 
background-repeat:no-repeat: 
background-attachment:fixed; 
background-size:85% 8596: 
/background-size: width height */ 

} 

高 度 值 并 非 一 定 要 设置 不 可 ， 实 际 上 ， 如 果 没 有 设置 高 度 值 ， 就 会 采用 默认 值 auto， 在 这 种 情 
况 下 ， 会 产生 最 小 化 效果 。 

与 前 面 提 到 的 背景 属性 类 似 ，Opera、Safari、Firefox、Chrome 和 IE9 都 支持 background-size 
属性 。 

关键 字 contain 在 对 背景 进行 缩放 的 同时 保持 其 纵横 比 , 此 时 背景 会 具有 最 大 的 尺寸 , 换言之 其 
宽度 和 高 度 会 和 应 用 该 背景 的 元 素 内 部 完全 匹配 (在 以 下 例子 中 是 <html> 元 素 )， 这 会 保证 在 使 用 
contain 时 ， 背 景 图 像 没 有 任何 部 分 会 被 裁剪 掉 。 如 果 容 器 对 于 图 像 而 言 过 大 ， 则 必须 确保 图 像 会 逐 
渐 融 合 于 某 种 纯色 , 这 种 纯色 可 被 用 作 默 认 背景 , 如 图 10-14 所 示 。 可 以 通过 用 逗号 分 隔 的 值 来 “ 包 
含 ”X 轴 或 Y 轴 ( 例 如 contain, 2530px)， 或 者 针对 X 轴 或 Y 轴 分 别 使 用 contain 关键 字 。 
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图 10-13 ”宽度 值 和 高 度 值 都 为 85% 图 10-14 具有 contain 值 的 应 用 效果 
此 外 ， 如 果 宽 度 值 和 高 度 值 都 没有 设置 ， 那 么 这 两 个 值 都 会 被 假定 为 aato， 此 时 背景 尺寸 的 效 


果 与 使 用 contain 时 相同 。 


htnl { 
background-image:url(img/earth1.jpg); 
background-position:5096 5096: 
background-repeat-no-repeat: 
background-attachment:fixed: 
background-size:contain: 
} 
男 一 方面 , cover 关键 字 总 是 控制 元 素 的 整个 背景 , 当 浏 览 器 窗口 改变 大 小 和 形状 时 会 调整 背景 
图 像 的 尺寸 ， 但 是 会 将 背景 图 像 的 一 些 边 缘 裁 剪 掉 ， 如 图 10-15 所 示 。 
htnl { 
background-image:url(img/earth1 .jpe):; 
background-position:50%% 509%; 
background-repeat:no-repeat 
background-attachment:fixed; 
background-size:cover; 


The Original Space Pioneers 


Miss Baker's Historic Flight 


图 10-15 具有 cover 值 的 应 用 效果 
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10.2.4 多 重 背景 


Clearleffs Silverback App 网 站 的 首页 中 分 层 设置 了 一 些 div 标记 , 这 些 div 标记 用 具有 不 同 百 分 
比 透 明度 的 PNG 透明 背景 进行 定位 ， 从 而 使 人 产生 具有 深度 的 错觉 。 当 浏览 器 窗口 改变 大 小 时 ， 
由 于 背景 图 像 会 产生 移动 以 保持 它们 在 浏览 器 内 部 的 部 分 ， 因 此 用 户 可 以 产生 一 种 视差 效应 ， 如 
图 10-16 所 示 。 

诸如 这 样 的 效果 容易 产生 很 多 不 必要 的 标记 ， 这 些 标记 毫 无 意义 ， 因 为 它们 位 于 div 内 部 ， 如 
何 才能 去 除 这 些 不 相关 的 标记 呢 ? 可 以 用 CSS3 的 多 重 背景 来 做 到 这 一 点 。 

CSS3 的 Backgrounds and Borders 模块 中 囊括 为 单个 元 素 添加 多 重 背景 的 能 力 。 针 对 
background-image 属性 或 简写 形式 的 background 属性 可 以 赋予 一 些 由 逗号 分 隔 的 值 ， 值 的 数目 定义 

了 所 应 用 的 背景 的 数量 。 下 面 将 展示 使 用 background-image 的 例子 ， 以 及 使 用 background 的 例子 ， 


所 以 不 必 担 心 把 这 两 种 用 法 搞 混 淆 ， 如 图 10-17 所 示 。 


图 10-17 三 幅 单独 的 图 像 


图 10-16 Clearleft's Silverback App 网 站 


首先 ， 已 经 为 html 元 素 设置 了 一 幅 背 景 图 像 ， 并 且 将 其 background-size 属性 设置 为 cover， 以 
使 背景 图 像 覆盖 整个 浏览 器 窗口 ， 如 图 10-18 所 示 。 


} 
现在 向 body 元 素 添加 多 重 背 景 ， 也 可 以 为 html 元 素 添加 多 重 背景 ， 但 是 使 用 其 他 元 素 可 以 更 
好 地 维护 低 性 能 浏览 器 ， 也 可 以 为 低 性 能 浏览 器 提供 更 好 的 备 选 方案 。 
为 了 添加 第 一 幅 背 景 图 像 ， 将 使 用 CSS 2.1 中 的 标准 表示 法 。body 元 素 的 高 度 被 设置 为 100%， 
以 确保 body 元 素 足够 高 ， 使 得 图 像 能 与 其 相 匹配 。 
body{ 
height:100%; 
background-image:url(img/planet] .png): 
background-repeat-no-repeat; 
‘background-position:50% 3096: 
} 
图 10-19 展示 了 已 经 就 位 的 第 一 幅 背 景 图 像 。 
为 了 给 body 元 素 添加 第 二 幅 背景 图 像 ， 可 以 为 每 个 背景 属性 额外 添加 一 个 值 , 添加 的 值 和 第 一 
个 值 之 间 用 逗号 分 隔 。 然 后 ， 针 对 background-repeat 和 background-position 属性 可 以 重复 上 述 步骤 。 
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body { 
height:1009%; 
background-image:url(img/planetl .png). url(img/planet?2 png): 
background-repeat-no-repeat, no-repeat 
background-position:50% 3096. 15% 9096: 


图 10-19 ”应 用 于 body 元 素 的 一 幅 背 景 图 像 


图 10-18 ”应 用 于 html 元 素 的 背景 图 像 


注意 第 二 幅 图 像 是 如 何 显示 在 第 一 幅 图 像 下 方 的 ， 如 图 10-20 所 示 ， 这 种 显示 方式 是 在 规范 中 
定义 的 : 第 一 幅 图 像 是 列表 中 最 接近 用 户 的 图 层 ， 下 一 幅 图 像 在 第 一 幅 图 像 的 后 面 绘制 ， 如 此 等 等 。 
如 果 有 背景 色 的 话 ， 它 在 所 有 其 他 图 层 的 后 面 绘 制 。 

由 此 看 出 ， 当 声明 多 个 值 时 ， 每 个 属性 的 每 个 值 都 由 逗号 分 隔 。 然 而 ， 可 以 通过 删除 
background-repeat 属性 的 一 个 no-repeat 值 来 稍稍 简化 上 面 的 例子 , 这 是 因为 如 果 没 有 使 用 多 个 值 (本 
例 中 是 两 个 值 )， 就 相当 于 告知 浏览 器 重复 第 一 个 值 。 

body { 

height:10096: 

background-image:uri(img/planet1.png), url(img/planet2.png): 
background-repeat:no-repeat: 

background-position:5096 3096. 1596 9096: 

} 

如 果 忘 记 添 加 第 二 个 background-image 值 ， 但 是 包含 两 个 background-position 值 ， 浏 览 器 
显示 第 一 幅 图 像 的 另 一 个 实例 ， 相 同 的 图 像 在 两 个 位 置 重 复 显 示 ， 如 图 10-21 所 示 ， 这 是 因为 浏览 
器 重复 了 background-image 属性 的 第 一 个 值 。 


body { 
height:1009%; 
background-image:url(img/planet] .png): /* we've forgotten to add our second image! */ 
background-repeat-no-repeat: 
background-position:50% 3096. 1596 90%%; 

} 


如 果 不 想 再 犯 这 样 的 错误 ， 就 要 在 添加 第 三 幅 图 像 时 添加 所 有 的 背景 属性 值 ， 这 一 次 使 用 简写 
形式 的 CSS 标记 , 即 background 属性 。 它 会 以 相同 的 方式 生效 , 只 需要 将 每 一 组 值 用 逗号 分 开 即 可 。 


body { 
height:1009%%; 
background:url(img/planet1 png) 5096 30% no-repeat url(img/planet2 png) 15% 90% no-repeat 
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ul(img/planet3 png) 75% 2096 no-repeat 


图 10-20 应 用 于 body 元 素 的 两 幅 背 景 图 像 图 10-21 一 幅 背 景 图 像 的 两 个 实例 


此 时 有 三 幅 背 景 图 像 被 应 用 到 一 个 元 素 上 ， 如 图 10-22 所 示 ， 使 用 百分比 值 的 妙 处 在 于 改变 浏 
览 器 大 小 时 ， 图 像 会 开始 动 来 动 去 并 隐藏 到 彼此 的 后 面 ， 如 图 10-23 所 示 。 

浏览 器 对 多 重 背 景 的 支持 非常 广泛 ， 多 重 背 景 在 Safari 5、Chrome 5、Opera 10.5、Intemet Explorer 9 
和 Firefox 3.6 中 让 效 。 如 果 某 个 浏览 器 不 支持 多 重 背 景 ， 它 就 不 会 显示 多 重 背 景 中 的 任何 一 幅 
图 像 。 出 于 这 个 原因 ， 可 以 在 单独 的 一 行 中 声明 最 重要 的 背景 图 像 ， 以 保证 多 重 背 景 中 至 少 有 一 幅 
图 像 能 够 显示 出 来 。 


图 10-22 将 三 幅 背 景 图 像 应 用 到 body 元 素 上 


图 10-23 ”小 的 浏览 器 窗口 中 的 多 重 背景 


body { 

height:10096: 

backgroundurl(img/planetl.png) 50% 3096 no-repeat: 

background: url(img/planetl .png) 50% 30% no-repeat . url(img/planet2.png) 15% 90% no-repeat. 
url(img/planet3.png) 75% 20% no-repeat: 
} 


这 是 一 种 相对 简单 的 技术 ， 而 且 多 重 背景 图 像 并 不 是 只 能 应 用 于 html 或 body 元 素 ， 它 们 可 以 
应 用 于 任何 元 素 。 


边框 


现在 ， 可 以 不 再 通过 添加 额外 的 标记 或 者 剪 切 外 部 图 像 来 创建 一 些微 不 足 道 的 细节 ， 比 如 创建 
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圆 角 ， 从 而 使 得 设计 更 有 吸引 力 。border-radius 属性 仅仅 利用 CSS 的 功能 就 可 以 提供 添加 自然 圆 角 
的 能 力 。 同 时 ，Backgrounds and Borders 模块 还 具有 为 边框 添加 图 像 的 能 力 。 


10.3.1 ”border-radius 属性 


只 要 写 几 行 很 短 的 CSS 代码 就 可 以 为 任意 元 素 添加 圆 角 。 简写 形式 的 border-radius 属性 可 以 实 
现 这 项 功能 ， 此 外 还 可 以 为 每 个 角 单 独 设置 诸如 border-top-left-radius 之 类 的 属性 。 

半径 是 圆 的 直径 的 一 半 ， 如 图 10-24 所 示 ， 所 以 ， 只 需要 通过 为 元 素 的 每 个 角 设置 唯一 的 值 ， 
就 可 以 将 这 些 角 变 为 相同 的 圆 角 。 


这 些 标记 无 需 厂 商 前 缀 就 可 以 在 Chrome 5、Safari 5、Firefox 4、Internet Explorer 9 和 Opera 10.5 
中 生效 。 使 用 简写 形式 的 border-radius 属性 ， 标 记 如 下 所 示 : 
#introduction { 
border-radius:20px 20px 20px 20px:; 
} 


T 


图 10-24 “半径 是 圆 的 直径 的 一 半 


就 像 margin 和 padding 属性 一 样 ， 当 编写 简写 形式 的 CSS 代码 时 ，border-radius 属性 也 可 以 使 
用 一 个 值 、 两 个 值 、 三 个 值 或 四 个 值 。 不 同 数目 的 值 对 角 产生 的 影响 如 下 所 示 。 

日 一 个 值 : 所 有 四 个 角 都 有 相同 的 半径 。 

e ”两 个 值 : 第 一 个 值 是 左上 角 和 右 下 角 ， 第 二 个 值 是 右上 角 和 左下 角 。 

。 三 个 值 : 第 一 个 值 是 左上 角 ， 第 二 个 值 是 右上 角 和 左下 角 ， 第 三 个 值 是 右 下 角 。 

e ”四 个 值 : 依次 是 左上 角 、 右 上 角 、 右 下 角 和 左下 角 。 

因为 例子 中 所 有 角 的 边框 半径 相同 ， 所 以 可 以 将 规则 简化 为 如 下 所 示 : 

#introduction { 

border-radius:20px: 

} 

前 面 的 三 个 例子 得 到 相同 的 结果 ， 如 图 10-25 所 示 ， 可 以 用 简写 形式 的 属性 和 值 简化 代码 。 

border-radius 的 值 可 以 用 em、 像素 和 百分比 作为 单位 ， 它 还 可 以 和 背景 图 像 结合 起 来 使 用 ， 如 
图 10-26 所 示 。 
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##introduction { 
background:rgba(0.0,0,0.3) url(img/bg-moon jpg) 50% 50% 
no-repeat: 
border-radius:2em; 
} 


图 10-25 具有 相同 边框 半径 的 盒子 模型 图 10-26 ”具有 边框 半径 和 背景 图 像 的 盒子 模型 


边框 半径 可 以 有 两 个 长 度 值 : 一 个 针对 XX 轴 ( 水 平 )， 另 一 个 针对 Y 轴 ( 垂 直 )。 这 可 以 创建 椭圆 
形状 。 水 平方 向 和 垂直 方向 的 值 由 两 者 之 间 的 斜 杠 ) 分 隔 ， 斜 杠 之 前 的 值 是 水 平方 向 的 半径 ， 斜 杠 
之 后 的 值 是 垂直 方向 的 半径 。 图 10-27 展示 了 这 种 效果 。 
#introduction { 
background:rgba(0.,0,0,0.3) url(img/bg-moon.jpg) 50% 50% 


no-repeat; 
border-radius:2em / 6em: 


} 

还 可 以 为 每 个 角 在 水 平方 向 和 垂直 方向 上 设置 不 同 的 半径 ， 可 以 用 简写 形式 的 border-radius 并 
声明 8 个 值 ， 每 4 个 值 之 间 用 斜 杠 分 隔 ; 也 可 以 使 用 单独 的 角 属 性 (border-top-left-radius)， 每 个 角 属 
性 有 两 个 值 ， 两 个 值 之 间 不 用 斜 杠 分 隔 。 下 面 两 个 例子 在 div 上 具有 相同 的 效果 ， 如 图 10-28 所 示 。 

简写 形式 如 下 : 

#introduction { 

background:rgba(0,0,0,0.3) url(img/bg-moon.jpg) 50% 50% 
no-repeat: 
border-radius:2em 4em 6em 8em / 9em 7em Sem 3enn 

} 

Individual comer properties: 

#introduction { 

background:rgba(0.0.0.0.3) url(img/bg-moon jpg) 5096 50% 
no-repeat: 
border-top-left-radius: 2em 9em: 
border-top-right-radius: 4em 7em: 
border-bottom-right-radius: 6em Sem: 
border-bottom-left-radius: gem 3em: 
} 
将 border-radius 直接 应 用 于 img 元 素 。 如 果 将 border-radius 直接 应 用 于 img 或 video 元 素 , 边框 
半径 将 无 法 正确 地 对 图 像 进行 裁剪 ， 如 图 10-29 所 示 。 解 决 该 问题 的 最 佳 方案 是 将 这 种 风格 应 用 于 


外 部 的 figure 或 div 元 素 。 
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< A 
图 10-27 水 平方 向 和 垂直 方向 的 半径 不 同 图 10-28 每 个 角 的 水 平方 向 和 垂直 方向 的 半径 不 同 
不 仅 能 使 用 border-radius 对 div、article 或 section 元 素 进 行 样式 化 ， 而 且 可 以 将 其 应 用 于 锚 点 、 
输入 甚至 表格 。 你 可 以 广泛 地 应 用 border-radius， 通 过 创建 圆 、 椭 圆 等 来 增加 设计 的 趣味 性 。 


Chrome Firefox Safari Opera 


图 10-29 直接 将 border-radius 应 用 于 img 元 素 


10.3.2 border-image 属性 


border-image 属性 允许 指定 一 幅 图 像 作 为 元 素 的 边框 。 

边框 图 像 可 以 由 单 幅 图 像 创建 ， 这 幅 图 像 可 以 在 元 素 周 边 的 边框 中 沿 着 不 同 的 轴 向 进行 裁 切 或 
拉 伸 。 换 名 话说， 图像 被 4 条 线 划 分 (或 切 分 ) 成 9 个 切片 ， 如 图 10-30 所 示 。 

4 个 角 切 片 用 于 创建 元 素 边框 的 4 个 角 ， 剩 下 的 4 个 边 切片 由 border-image 用 来 填充 元 素 边框 
的 4 条 边 。 然 后 可 以 指定 切片 的 宽度 以 及 是 否 希 望 这 些 切 片 平 铺 或 拉 伸 以 填 满 元 素 边框 的 全 部 长 度 。 
如 果 中 间 的 切片 不 为 空 ， 就 会 填充 border-image 所 应 用 的 元 素 的 背景 。 

border-image 属性 的 基本 语法 是 : 

border-image: <image> <slice> <repeat> 

其 中 : 

e@ image 是 准备 用 作 边 框 的 图 像 文 件 的 URL 地 址 。 

e@ slice 由 4 个 值 决定 ， 每 个 值 要 么 是 百分比 ， 要 么 是 数字 ， 它 们 决定 了 切片 的 尺寸 。 

e@ ”repeat 是 指 对 边框 进行 平 铺 的 方式 ， 可 设置 成 round、stretch、space 和 repeat 中 的 两 个 值 。 

在 图 10-30 中 ， 每 个 切片 的 宽度 都 是 15px， 这 也 是 用 border-image 属性 指定 的 切片 值 。 因 此 ， 
我 们 也 可 以 将 border-width 属性 声明 为 13px。 如 果 想 要 对 边缘 切片 进行 平 铺 的 话 ， 可 以 使 用 关键 字 


Tepeat。 
考虑 上 述 所 有 内 容 ， 为 了 应 用 如 图 10-30 所 示 的 边框 图 像 ， 可 以 使 用 如 下 代码 : 
#introduction { 


border-width:15px; 
border-image-url(img/borderl .png) 15 15 15 15 repeat 
} 


和 2a4 
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效果 如 图 10-31 所 示 。 


4 
a 


图 10-30 被 切 分 成 9 个 切片 的 边框 图 像 图 10-31 ”应 用 边框 图 像 的 效果 


由 于 受 div 尺寸 的 影响 ， 使 用 repeat 并 不 一 定 起 作用 ， 一 些 图 案 会 隐藏 到 角 图 像 的 后 面 。 有 4 
个 拉 伸 选项 可 用 。 

。 round: 图 像 会 进行 平 铺 ， 直 至 填 满 整个 区 域 。 如 果 平 铺 之 后 切片 的 数目 与 区 域 不 匹配 ， 就 

会 对 图 像 进行 相应 的 缩放 。 

estretch， 图 像 会 被 拉 伸 ， 直 至 填 满 整 个 区 域 。 

erepeat:， 图 像 会 进行 平 铺 ， 直 至 填 满 整个 区 域 。 

e@ space: 图 像 会 进行 平 铺 ， 直 至 填 满 整个 区 域 。 如 果 平 铺 之 后 切片 的 数目 与 区 域 不 匹配 ， 就 

会 调整 图 像 之 间 的 间距 以 填 满 整个 区 域 。 

可 以 针对 平 铺 指定 两 个 值 : 第 一 个 值 用 于 水 平方 向 的 边框 ， 第 二 个 值 用 于 垂直 方向 的 边框 。 现 
在 将 stretch 和 round 选项 应 用 到 示例 中 ， 因 为 切片 大 小 是 相同 的 ， 所 以 可 以 将 切片 的 数目 从 4 减少 
到 1。 

#introduction { 

‘border-width:15px; 
-moz-border-image:ur(img/borderl .png) 15 stretch round: 
-webkit-border-image:url(img/borderl png) 15 stretch round; 
border-image:url(img/borderl .png) 15 stretch round: 

} 

图 10-32 展示 了 如 何 将 stretch 和 round 选项 应 用 于 div 标记 。 

Opera 、Chrome 、Safari 和 Firefox 都 支持 borderimage， 目 前 Intemet Explorer 还 不 支持 
border-image，IE10 的 各 种 预览 版 也 都 没有 包含 对 border-image 的 支持 。 

将 border-image 和 border-radius 结合 起 来 使 用 会 产生 什么 效果 呢 ? 正如 在 图 10-33 中 看 到 的 那 
样 ， 当 把 半径 应 用 到 背景 上 时 ， 边 框图 像 仍 然 会 保持 在 合适 的 位 置 。 为 了 避免 该 问题 ， 只 需要 在 边 
框图 像 的 四 个 角 切 片 中 重建 圆 角 即 可 。 


stretch 
repeat 
round 


图 10-32 ”应 用 stretch 和 round 的 边框 图 像 10-33 ”与 borderradius 一 起 应 用 的 边框 图 像 
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下 拉 阴 影 


下 拉 阴 影 与 圆 角 和 渐变 一 样 ， 向 盒子 模型 添加 阴影 曾经 是 
Backgrounds and Borders 模块 之 后 ， 情 况 就 不 再 是 这 样 了 。 


10.4.1 box-shadow 属性 
向 元 素 添加 box-shadow 属性 十 分 简单 ， 该 属性 可 以 接收 6 个 值 


莉 梦 般 的 经 历 。 有 了 CSS3 的 


: 水 平 偏 移 CX)、 垂 直 偏 移 (Y)、 


模糊 、 伸 展 距离 、 颜 色 以 及 可 选 关键 字 inset， 该 关键 字 将 外 阴影 转换 成 内 阴影 。 


box-shadow:inset [offsetX offsetY <blur> <spread> <color>]; 


这 听 起 来 很 复杂 , 使 用 box-shadow 的 最 小 需求 可 以 简化 问题 。 所 谓 最 小 需求 , 就 是 两 个 偏 移 值 。 
也 可 以 使 用 负 的 偏 移 值 。 正 的 偏 移 值 向 右 方 和 下 方 绘制 阴影 , 负 的 偏 移 值 则 向 上 方 和 左 方 绘 制 阴影 。 


如 何 选择 偏 移 值 的 组 合 取决 于 设计 者 以 及 伪 光 源 的 位 置 。 
#introduction { 
border:Spx solid rgba(0.0.0.0.7); 
background:rgba(255.255.255.0.7); 
padding:0 20px; 
border-radius:20px; 
box-shadow:15px 15px; 
} 


如 果 不 包含 颜色 值 ，box-shadow 就 会 接收 由 浏览 器 指定 的 颜色 ， 所 以 可 以 用 rgba 向 本 例 添加 


颜色 。 


#introduction { 
border:Spx solid rgba(0,0,0,0.7); 
background:rgba(255.255.255.0.7); 
padding:0 20px; 
border-radius:20px: 
box-shadow:15px 15px rgba(0.0.0.0.4): 

} 


如 果 没 有 指定 模糊 半径 值 , 阴影 就 不 会 产生 模糊 , 因此 边缘 会 十 分 锐利 。 阴影 半径 是 box-shadow 


可 接收 的 第 三 个 值 ， 本 例 中 为 10px， 模 糊 半径 值 不 能 为 负 值 。 


#ntroduction { 
border:5px solid rgba(0.0.0.0.7): 
background:rgba(255.255.255.0.7): 
padding:0 20px: 
border-radius:20px: 
box-shadow:15px 15px 10px rgba(0.0.0.0.4): 
} 


接 下 来 可 以 添加 的 一 个 值 是 伸展 半径 ， 该 值 越 大 ， 阴 影 就 会 扩展 得 越 多 。 与 模糊 半径 不 同 ， 伸 


展 半径 可 以 为 负 值 。 如 果 不 包含 伸展 半径 值 ， 阴 影 就 不 会 进行 扩展 。 
如 图 10-34 所 示 。 
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#introduction { 
border:Spx solid rgba(0.0.0.0.7): 
background:rgba(255.255.255.0.7); 
padding:0 20px: 
border-radius:20px: 
box-shadow:15px 15px 10px Spx rgba(0.0.0.0.4): 
} 


偏 移 、 模 糊 和 伸展 值 的 单位 可 以 是 像素 或 em。Opera、Safari、Chrome、Firefox 和 Intemet Explorer 9 
都 支持 box-shadow。 
最 后 一 个 值 是 关键 字 inset, 它 将 阴影 放置 在 元 素 内 部 。 在 图 10-35 中 可 以 看 到 该 值 产生 的 效果 : 
因为 阴影 现在 位 于 元 素 内 部 ， 所 以 减 小 了 其 尺寸 。 
#introduction { 
borderspx solid rgba(0.0.0.0.7): 
background:rgba(255,255,255.0.7); 


图 10-34 没有 厂商 前 缀 的 box-shadow 图 10-35 ”使 用 inset 关键 字 的 内 部 box-shadow 


padding:0 20px; 
border-radius:20px: 
box-shadow:3px 3px 3px 2px rgba(0,0,0,0.4) inset 
} 
可 以 创建 多 重 阴影 ， 只 需要 将 每 个 阴影 用 逗号 分 开 即 可 ， 如 图 10-36 所 示 。 
div#introduction { 
border:Spx solid rgba(0,0,0,0.7); 
background:rgba(255,255,255.0.7); 
Padding:0 20px; 
border-radius:20px: 
box-shadow:3px 3px 3px 2px Tgba(0.0.0.0.4) inset 15px 15px 10px Spx rgba(0.0,0,0.4): 
还 可 以 使 用 负 的 偏 移 值 并 翻转 阴影 ， 从 而 产生 光源 来 自 不 同方 向 的 效果 ， 如 图 10-37 所 示 。 
diviintroduction { 
border:Spx solid rgba(0,0,0,0.7); 
background:rgba(255.255.255.0.7); 
Padding:0 20px: 
border-radius:20px: 
box-shadow:-3px -3px 3px 2px Tgba(0.0.0.0.4) inset -15px -15px 10px Spx rgba(0.0.0,0.4); 
时 


CSS3 的 box-shadow 属性 有 无 数 种 可 能 性 ， 但 是 不 要 滥用 ， 而 要 巧妙 地 使 用 ， 一 定 不 要 看 起 来 
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像 Photoshop 的 默认 下 拉 阴 影 。 


图 10-36 ”Opera 10.6 中 的 多 重 阴影 图 10-37 Opera 10.6 中 具有 负 值 的 box-shadows 


10.4.2 text-shadow 属性 


text-shadow 属性 与 box-shadow 属性 惊人 般 相似 。 可 以 用 相同 的 box-shadow 标记 将 一 个 或 几 个 
阴影 应 用 于 文本 。 注 意 text-shadow 不 接收 伸展 值 或 关键 字 inset。 
hf 
Color:#777; 


text-shadow: Spx Spx 10px rgba(0.0.0,0.5); 
/* text-shadow: x offset y offset blur color */ 


; 
可 以 在 图 10-38 中 看 到 效果 。 
与 box-shadow 一 样 ， 可 以 将 多 个 阴影 应 用 于 元 素 上 。 没 有 关键 字 inset 辅助 创建 内 阴影 。 可 以 
使 用 多 个 text-shadow, 其 中 一 些 text-shadow 具有 负 值 , 从 而 得 到 凸 起 (或 叫 陷 ) 样 式 的 外 观 , 如 图 10-39 
ht 
text-shadow: -1px 0 0 rgba(0.0,0,0.5). 0 -1px 0 rgba(0.0.0.03).0 1px 0 
rgba(255,255.255.0.5), -1px -2px 0 rgba(0.0.0.0.3); 
} 
Space Pioneers Space Pioneers 
图 10-38 Chrome 中 的 text-shadow 图 10-39 用 text-shadow 创建 的 凸 起 样式 


虽然 text-shadow 是 在 CSS 2.1 中 引入 的 , 但 是 低 版 本 的 Intemet Explorer 还 不 支持 它 GE 10 支持 
它 )。 如 果 要 在 正 中 使 用 文本 阴影 ， 那 么 可 以 使 用 特有 的 微软 过 滤器 来 显示 它 。 通 常 就 渐进 式 增强 
的 意义 而 言 ， 正 用 户 看 不 到 阴影 也 无 所 谓 。Opera、Safari、Chrome 和 Firefox 都 支持 text-shadow。 
可 以 用 text-shadow 创建 伪 浮 雕 效果 ， 让 网 站 真正 以 3D 形式 出 现 ， 如 图 10-40 所 示 。 
-anaglyph { 
colorrgba(0.0.0.0.8): 
text-shadow: 0.1em 0 0 rgba(0.245.244.0.5). -0.05em 0 0 rgba(244.0.0.0.9); 
} 
浮雕 效果 固然 很 好 , 但 是 谁 会 戴 上 3D 眼镜 来 浏览 网 站 呢 ? 我 们 需要 的 是 真正 的 3D 文本 , 如 图 
10-41 所 示 ， 在 这 个 文本 上 应 用 了 12 种 阴影 ， 所 以 在 一 些 浏览 器 中 会 造成 性 能 问题 ， 但 是 它 看 上 去 
确实 很 好 。 
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Space Pioneers 3D Text 
10-40 ”使 用 text-shadow 创建 的 伪 3D 浮雕 效果 10-41 使 用 text-shadow 创建 的 3D 文本 


用 text-shadow 可 以 创建 文本 周边 的 轮廓 ， 也 就 是 将 阴影 应 用 于 文本 的 每 个 边缘 。 为 了 获得 预期 
的 效果 ， 需 要 为 文本 定义 一 种 与 背景 色相 匹配 的 颜色 ， 从 而 得 到 透明 效果 ， 如 图 10-42 所 示 。 
‘title { 
colorfkcec; 


‘text-shadow: -1px 0 rgba(0,0.0.0.5), 0 1px rgba(0.0.0.0.5), 1px 0 rgba(0.0.0.0.5).0 -1px rgba(0.0.0.0.5); 
于 


Space Pioneers 
图 10-42 ”WebKit 浏览 器 使 用 多 个 文本 阴影 创建 的 轮廓 效果 
如 果 使 用 WebKit 浏览 器 ， 借 助 该 浏览 器 特有 的 -webkit-text-stroke 属性 可 以 获得 同样 的 效果 。 
与 text-shadow 不 同 ，-webkit-text-stroke 没有 模糊 值 ， 它 的 工作 方式 如 下 所 示 : 
hf{ 
color:transparent: 


-webkit-text-stroke:rgba(0.0,0,0.5); 
} 


IT 渐变 


渐变 功能 位 于 CSS 的 Image Values and Replaced Content 模块 中 。 

基于 CSS 的 渐变 为 Firefox、Safari、Chrome、Opera 和 正 10 浏览 器 所 支持 。 通 过 使 用 过 滤器 ， 
在 旧版 本 的 Intemet Explorer 中 也 可 以 获得 渐变 。 对 于 那些 不 支持 CSS 渐变 的 浏览 器 ， 需 要 指定 一 
种 背景 色 作为 备 选 。 有 两 种 形式 的 渐变 : 线性 渐变 和 放射 渐变 。 


1. 线性 渐变 


线性 渐变 值 实际 上 会 生成 一 幅 图 像 ， 这 幅 图 像 与 CSS 中 的 图 像 用 处 相同 ， 也 有 
background-image、border-image 或 list-style-image 属性 。 用 这 种 方式 设计 线性 渐变 是 因为 人 们 熟悉 
用 图 像 产生 渐变 ， 因 此 渐变 不 能 当 作 颜 色 值 使 用 ， 其 基本 表示 法 如 下 所 示 : 

linear-gradient([ [ <angle> | to <side-or-comer> ] :]? 

<color-stop>[. <colorstop>]+ ) 

其 中 各 个 值 的 含义 如 下 所 示 。 

ee angle: 渐变 方向 的 角度 ， 值 可 以 为 负数 或 者 大 于 360?。 

@ side-or-comer: 定义 渐变 的 起 始点 (如 果 没有 使 用 角度 的 话 ), 其 值 可 从 4 个 变量 (top、bottom、 

left、righb 中 选取 两 个 来 指定 ， 默 认 值 是 top left。 如 果 只 声明 一 个 值 ， 那 么 第 二 个 值 默 认 是 
center。 


”color-stop: 该 值 的 最 简单 形式 是 一 个 颜色 值 ， 还 可 以 沿 着 渐变 为 其 添加 可 选 的 终止 位 置 ， 
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终止 位 置 是 0~100% 之 间 的 某 个 值 。 颜色 值 的 表示 法 可 以 是 关键 字 、 十 六 进 制 代码 以 及 rgba 
或 hsla。 
CSS 渐变 与 Photoshop 渐变 的 工作 方式 相同 ， 可 以 沿 着 渐变 从 头 (0%) 至 尾 (100%) 添 加 颜色 终止 
位 置 ， 如 图 10-43 所 示 。 


本 


Eeesa 和 
起 始点 颜色 终止 位 置 结束 点 
(25%, 50%, 75%,) 


图 10-43 ”颜色 终止 位 置 的 示例 
为 了 创建 从 灰色 到 黑色 的 垂直 渐变 ， 可 以 这 样 使 用 : 
#introduction { 
background:#000; /* fallback for browsers that don’t support gradients */ 
background:linear-gradient(to bottom. #ccc. #000); 
} 
或 者 : 
#introduction { 
background:#000; /* fallback for browsers that don't support gradients */ 
background:linear-gradient(90deg, #ccc, #000): 
} 
因为 没有 必要 声明 角度 、 边 或 角 ， 渐 变 默 认 是 垂直 的 ， 所 以 只 需要 两 个 颜色 值 。 这 和 如 下 表 
示 法 的 效果 相同 : 
#introduction { 
background:#000; /* fallback for browsers that don't support gradients */ 
background:linear-gradient(#ccc, #000):; 
} 
由 于 浏览 器 需要 厂商 前 组 以 支持 渐变 ， 因 此 为 了 创建 如 图 10-44 所 示 的 渐变 ， 需 要 添加 厂商 前 组 : 
#introduction { 
‘background:#000; /* fallback for browsers that don't support gradients*/ 
background:-ms-linear-gradient(#ccc, #000); 
background:-moz-linear-gradient(#ccc. #000): 
background:-o-linear-gradient(#ccc. #000); 
background:-webkit-linear-gradient(#ccc, #000): 
background:linear-gradient(#ccc., #000); 
} 
90? 角 意味 着 渐变 从 项 到 底 绘制 , 角度 值 是 从 左边 开始 设置 渐变 角度 的 , 其 中 : 0°= 左 , 90° = 底 ， 
180°= 右 ，270° = 顶 ，360° = 再 次 为 左 ， 从 而 完成 一 个 完整 的 圆 。 
也 可 以 将 负 值 应 用 于 渐变 ， 但 是 负 值 与 其 按 逆 时 针 变化 的 对 应 的 正 值 效 果 相 同 。 例 如 : 一 
-90°=270?。 为 了 创建 从 左下 方 到 右上 方 的 渐变 ， 就 要 使 用 45° 角 ， 如 图 10-45 所 示 。 
#introduction { 
background:#000; 
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background:-ms-linear-gradient(45deg. #cce, #000); 
background:-moz-linear-gradient(45deg#ccc. #000): 
background:-0-linear-gradient(45deg, #ccc. #000); 
background:-webkit-linear-gradient(45deg, #ccc, #000); 
background:linear-gradient(45deg. #ccc. #000): 


pe a 


图 10-44 Firefox 中 的 垂直 渐变 图 10-45 ”Firefox 中 的 对 角 线 性 渐变 


只 要 向 参数 中 添加 另 一 个 颜色 值 就 可 以 添加 颜色 终止 位 置 ， 渐 变 会 均匀 显示 ， 除 非 再 指定 一 个 
表示 颜色 终止 位 置 的 附带 值 。 图 10-46 展示 了 位 于 50% 的 颜色 终止 位 置 ， 但 是 也 可 以 用 像素 或 ems 
指定 终止 位 置 在 何 处 出 现 。 
#introduction { 
background:#000:; 
background:-ms-linear-gradient(45deg, #ccc., #c8c8c8 50%, #000); 
background:-moz-linear-gradient(45deg, #ccc, #c8c8c8 509%, #000); 
background:-0-linear-gradient(45deg, #ccc, #c8c8c8 509%, #000); 
background:-webkit-linear-gradient(45deg., #ccc, #c8c8c8 50%, #000); 
background:linear-gradient(45deg, #ccc, #c8c8c8 5096, #000): 

} 


2. 放射 渐变 
放射 渐变 的 语法 比 线性 渐变 复杂 一 些 ， 标 准 的 表示 法 如 下 所 示 : 
Tadial-gradientt 
[[ <shape> || <size> ] [ at <position> ]? .| 
at <position>, 
了 
<color-stop> [ .<color-stop> }+ 
) 
其 中 : 
@ ”position 是 渐变 的 起 始点 ， 可 以 由 单位 (像素 、em 或 百分比 或 关键 字 (left、bottom 等 ) 指 定 。 
使 用 关键 字 的 方法 与 background-position 相同 ， 默 认 值 是 center。 
eshape 指定 渐变 的 形状 , 可 以 是 圆 (半径 不 变 的 椭圆 或 椭圆 ( 轴 对 齐 椭圆 )， 默认 值 是 椭圆 。 如 
果 没 有 声明 形状 ， 最 后 的 形状 由 长 度 单位 决定 。 如 果 只 有 一 个 长 度 ， 默 认 形状 是 圆 ， 如果 
有 了 两 个 长 度 ， 默 认 形状 是 椭圆 。 
e@ size 是 渐变 最 终 形状 的 尺寸 ， 如 果 没 有 包括 该 值 ， 那 么 默认 值 是 farthest-side，size 可 以 用 单 
位 或 关键 字 指 定 。 
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为 了 绘制 简单 的 圆 形 放射 渐变 ， 将 其 拉 伸 到 容器 的 边缘 ， 如 图 10-47 所 示 ， 需 要 进行 如 下 所 示 
的 声明 ; 


#introduction { 
background:#000; 
background: -moz-radial-gradient(circle closest-side, #ccc, #000); 
background: -ms-radial-gradient(circle closest-side, #ccc, #000): 
background: -0-radial-gradient(circle closest-side, #ccc, #000); 
background: -webkit-radial-gradient(circle closest-side, #ccc, #000); 
background: radial-gradient(circle closest-side, #cce., #000); 


图 10-46 ”对 角 线 性 渐变 图 10-47 ” 圆 形 放射 渐变 
改变 ellipse 和 farthest-side 的 形状 和 尺寸 ， 可 以 将 圆 形 压 缩 成 具有 更 大 范围 的 椭圆 ， 如 图 10-48 
所 示 。 


#introduction { 
background:#000: 
background: -moz-radial-gradient(ellipse farthest-side, #ccc, #000); 
background: -ms-radial-gradient(ellipse farthest-side, #ccc, #000); 
background: -0-radial-gradient(ellipse farthest-side, #ccc., #000); 
background: -webkit-radial-gradient(ellipse farthest-side, #ccc, #000); 
background: radial-gradient(ellipse farthest-side., #ccc, #000); 


} 
通过 添加 位 置 值 可 以 使 渐变 偏离 中 心 。 在 200px 处 添加 颜色 停止 位 置 ， 如 图 10-49 所 示 。 
#introduction { 

background:#000; 


background: -moz-radial-gradient(left top, ellipse farthest-side, #ccc. #75aadb 200px. #000); 
background: -ms-radial-gradient(left top, ellipse farthest-side, #ccc, #75aadb 200px. #000): 
background: -0-radial-gradient(left top. ellipse farthest-side, #cce. #75aadb 200px. #000); 
background: -webkit-radial-gradient(left top, ellipse farthest-side, #ccc. #75aadb 200px. #000): 
background: radial-gradient(left top. ellipse farthest-side. #ccc. #75aadb 200px, #000); 


图 10-48 椭圆 形 放射 渐变 图 10-49 ”添加 颜色 停止 位 置 的 椭圆 形 放射 渐变 
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3. 平 铺 渐变 


使 用 repeating-linear-gradient 或 repeating-radial-gradient， 可 以 创建 平 铺 渐变 。 平 铺 图 案由 第 一 个 
和 第 二 个 颜色 终止 位 置 之 间 的 多 个 差 值 创建 ， 如 图 10-50 所 示 。 和 早期 的 渐变 一 样 ， 需 要 使 用 厂商 
前 级 以 保证 能 够 在 现代 浏览 器 中 获得 良好 的 支持 。 


div#introduction { 
background:#000; 
background: -ms-repeating-linear-gradient(#333, #ccc 60px. #333 55px, #ccc 30px); 
background: -moz-repeating-linear-gradient(#333, #ccc 60px. #333 55px, #ccc 30px); 
background: -0-repeating-linear-gradient(#333, #ccc 60px, #333 55px, #cce 30px); 
background: -webkit-repeating-linear-gradient(#333, #ccc 60px #333 55px, #ccc 30px): 
background: repeating-linear-gradient(#333, #ccc 60px. #333 55px, #ccc 30px); 

} 


对 于 放射 渐变 而 言 ， 可 以 使 用 如 下 所 示 的 代码 ， 在 图 10-51 中 可 以 看 到 效果 。 
#introduction { 

background:#000; 

ee “ms-repeating-radial-eradient(eenter, 30px 30px, #cce. #333 $096, #999); 


background: -webkit-repeating-radial-gradient(center, 30px 30px, #ccc, #333 5096. #999); 
background: repeating-radial-gradient(center, 30px 30px. #ccc, #333 50%, #999); 


图 10-50 ”Chrome 中 的 平 铺 对 角 线 性 渐变 图 10-51 Chrome 中 的 放射 平 铺 线性 渐变 


IT 检测 支持 和 辅助 其 他 浏览 器 


总 的 来 说 ，Safari、Chrome、Firefox、Opera 以 及 Internet Explorer 9 对 于 本 章 介绍 的 属性 都 有 较 
好 的 支持 ， 但 是 对 于 Internet Explorer 浏览 器 的 早期 版 本 有 下 面 三 种 选择 。 

e@ 在 CSS 代码 中 添加 备 选 ， 以 保证 低 性 能 浏览 器 可 以 适当 地 理解 属性 。 

e@ ”运行 Modemizr 之 类 的 检测 脚本 ， 并 相应 地 组 织 样式 表 。 

e@ 用 JavaScript 库 弥补 支持 需求 上 的 差距 。 

前 面 已 经 介绍 了 第 一 种 选择 ， 现 在 将 简要 介绍 第 二 种 和 第 三 种 选择 。 
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10.6.1 使 用 Modernizr 


Modemnizr(http://j.mp/modemizr) 与 CSS3 属性 之 间 有 如 下 关系 : 当 用 户 访问 网 站 时 ，Modemizr 
会 运行 并 检测 用 户 浏览 器 内 部 对 CSS3 和 HTMLS5 的 支持 ， 同 时 会 给 html 元 素 增加 一 系列 的 类 。 例 
如 ，Modernizr 会 给 Internet Explorer 增加 类 no-cssgradients。 这 意味 着 可 以 在 一 个 样式 表 中 拥有 两 套 
规则 来 迎合 两 种 浏览 器 。 假定 有 一 种 设计 必须 具有 渐变 背景 , 即 不 能 使 用 纯色 。 对 于 Safari、 Chrome、 
Opera 和 Firefox， 可 以 按照 如 下 所 示 的 方式 进行 样式 化 : 
.Cssgradients { 
background:-moz-linear-gradient( center bottom rgb(240.120.14) 50%.rgb(250,151,3) 90%%); 
background:-webkit-linear-gradient( linear, left bottom, left top, color-stop(0.5, 
Tgb(240,120,14)), color-stop(0.9, rgb(250,151,3))); 
background: -0-linear-gradient( linear left bottonm. left top. color-stop(0.5, 
rgb(240,120,14)), color-stop(0.9, reb(250,151,3))); 
background: -ms-linear-gradient( linear, left bottom., left top, color-stop(0.5. 
rgb(240,120,14)), color-stop(0.9, rgb(250,151,3))): 
‘background:linear-gradient( linear, left bottom, left top, color-stop(0.5, rgb(240,120,14)), 
color-stop(0.9, rgb(250,151,3))); 
} 
对 于 旧版 的 Internet Explorer， 可 以 用 图 像 创建 渐变 ， 并 将 属性 添加 到 no-cssgradients 类 中 。 
no-Cssgradients { 
background:#ccc url(img/bg-rpt.png) 0 0 repeat-x; 
} 
使 用 这 种 方法 不 仅 能 在 那些 对 CSS3 具有 良好 支持 的 浏览 器 中 得 到 最 佳 效 果 ， 而 且 在 那些 对 
CSS3 支持 较 少 的 浏览 器 中 也 能 得 到 较 好 的 效果 。 


10.6.2 CSS3 Pie 


可 以 利用 CSS3 PieChttp:/imp/css3pie) 将 边框 半径 应 用 于 IE6~IE8 中 。CSS3 Pie 可 以 支持 本 章 介 
绍 的 大 部 分 属性 。 没 有 使 用 CSS3 Pie 的 规则 如 下 所 示 : 


为 了 在 正 6~IE8 中 增加 这 种 支持 ， 只 要 添加 CSS3 Pie behavior: urlGis/PIE.htc) 即 可 ， 这 样 就 可 以 
在 Intemet Explorer 中 得 到 圆 角 。 


#ntroduction { 


behavior ul(js/PIE hte): 
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组 合 CSS3 效果 实例 


例 10-1: 本 章 前 面 介绍 了 许多 在 CSS3 中 可 用 的 新 属性 ， 下 面 用 这 些 属性 设计 一 个 看 起 来 很 可 
爱 的 按钮 ， 如 图 10-52 所 示 ， 这 个 按钮 的 基本 样式 代码 如 下 所 示 : 


首先 用 RGB 值 R=240、G=120、B=14 改变 背景 色 ， 并 用 HSL 修改 边框 颜色 ， 将 原来 丑陋 的 边 
框 去 掉 ， 如 图 10-53 所 示 。 


input[gpe- submit ] { 


background:rgb(240,120,14); 
border:1px solid hsla(30.10096.5096.0.8): 


图 10-52 基本 的 按钮 样式 图 10-53 用 RGB 和 HSL 进行 样式 化 后 的 按钮 
然后 通过 添加 border-radius 将 尖锐 的 方形 边 角 变 得 光滑 。 


inputltype="submit"] { 
font-size:18px; 
width:auto; 
padding:0.5em 2em:; 
colorfEEE 
background:rgb(240,120.14): 
border:1px solid hsla(20.10096.5096.0.7): 
border-radius: Spx; 
} 
少许 阴影 可 以 将 按钮 稍微 抬升 ， 使 得 它 看 起 来 更 为 引 人 注 目 ， 如 图 10-54 所 示 。 


input[type="submit"] { 
font-size:18px: 
width:auto; 
Padding:0.5em 2em:; 
colorfEEE 
background:reb(240.120.14): 
border:1px solid hsla(20.10096.5096.0.7): 
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border-radins: Spx: 
box-shadow:1px 2px 3px rgba(0.0.0.0.5); 
} 


现在 , 应 用 本 章 前 面 使 用 text-shadow 创建 的 凹陷 文本 ， 使 得 文本 看 起 来 像 是 嵌入 在 按钮 中 。 为 
此 要 向 文本 添加 4 个 阴影 ， 阴 影 值 之 间 用 逗号 分 开 。 


input[type="submit"] { 

font-size:18px; 

width:auto; 

padding:0.5em 2em 

colorfEEF 

background:rgb(240,120,14): 

border: 1px solid hsla(20,100%,50%,0.7); 

border-radius: 5px: 

box-shadow:1px 2px 3px rgba(0.0,0,0.5); 

text-shadow: -1px 0 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(0.0,0.0.3), 0 1px 0 
rgba(255,255,255.0.5), -1px -1px 0 rgba(250,151,3,0.5): 
} 


为 了 对 按钮 进行 一 些 柔 化 ， 将 针对 背景 使 用 CSS 产生 的 渐变 ， 如 图 10-55 所 示 。 请 记 住 这 些 属 
性 只 在 Firefox、Safari、Opera 和 Chrome 中 有 效 ， 所 以 要 将 现 有 的 background 属性 作为 备 选 。 现 在 
有 了 完整 的 基于 CSS 样式 化 的 漂亮 按钮 。 

input[type="submit"] { 

font-size:18px; 

width:auto; 

padding:0.5em 2em; 

Color-#ffE: 

background:rgb(240,120,14): 

border:1px solid hsla(20.10096.5096.0.7); 

border-radius: Spx; 

box-shadow: lpx 2px 3px rgba(0,0.0.0.5): 

text-shadow: -1px 0 0 rgba(0,0,0,0.3), 0 -1px 0 rgba(0,0,0.0.3), 0 1px 0 rgba(255.255.255.0.5), -1px -1px 0 rgba(250,151,3,0.5); 

background:-moz-linear-gradient( center bottom.rgb(240,120.14) 5096rgb(250.151.3) 909%); 

background:-webkit-linear-gradient( linear, left bottom, left top, color-stop(0.5, rgb(240,120,14)), color-stop(0.9, 
rgb(250,151,3))): 

background:-o-linear-gradient( linear, left bottom, left top. color-stop(0.5, rgb(240,120,14)), color-stop(0.9, rgb(250,151,3))); 

background:-ms-linear-gradient( linear, left bottom, left top. color-stop(0.5, rgb(240,120,14)), color-stop(0.9, rgb(250,151,3))); 

background:linear-gradient linear, left bottom, left top, color-stop(0.5. rgb(240.120.14)). color-stop(0.9, rgb(250,151,3))): 


} 


图 10-54 具有 圆 边 角 和 外 阴影 的 按钮 图 10-55 具有 text-shadow 和 CSS 渐变 背景 的 按钮 


最 后 ， 为 按钮 的 :hover 和 :focus 状态 添加 一 些 样式 ， 结 合 使 用 position:relative 和 top:1px， 
为 按钮 创建 光标 悬 停 其 上 就 按 下 的 效果 。 此 外 ， 通 过 翻转 背景 渐变 、 减 少 盒 模型 阴影 以 及 移动 文本 
阴影 来 获得 两 种 状态 之 间 必 要 的 对 比 效果 ， 如 图 10-56 所 示 。 
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input[type= submit ]:hover input[type="submit"]-focus { 
人 

top:lpx: 
box-shadow:1px 1px 2px rgba(0.0.0,0.5): 
text-shadow: -1px 0 0 rgba(0.0,0.0.3), 0 1px 0 rgba(0.0.0.0.3), 00 0 rgba(255,255,255.,0.5), -1px 1px 0 rgba(250,151,3.0.5); 
background:rgb(250,151,3); 
background:-moz-linear-gradient(center bottom rgb(250,151,3) 50%, rgb(240.120.14) 909%.); 
background:-webkit-linear-gradient( linear left bottom, left top, color-stop(0.5, rgb(250,151.3)), color-stop(0.9, rgb(240,120.14))); 
background:-0-linear-gradient( linear, leftbottom left top, color-stop(0.5, rgb(250,151,3)), color-stop(0.9, rgb(240,120.14))); 
background:-ms-linear-gradient( linear left bottom left top, color-stop(0.5, rgb(250,151,3)), color-stop(0.9, rgb(240,120,14))); 
background:linear-gradient( linear left bottom., left top, color-stop(0.5, rgb(250,151,3)). color-stop(0.9, rgb(240,120,14))); 


Normal State Hover/Focus State 


图 10-56 处 于 正常 和 :hover 状态 的 按钮 


完整 的 样式 规则 也 许 看 起 来 很 深奥 ， 但 是 效果 却 很 容易 获得 。 将 完整 的 样式 规则 分 解 成 小 块 代 
码 并 进行 组 合 ， 就 可 以 用 CSS3 属性 创建 具有 漂亮 样式 的 元 素 。 


本 章 小 结 


浏览 互联 网 ， 人 们 应 用 本 章 讲 述 的 技术 创建 了 众多 实例 ， 其 中 大 量 的 实例 只 用 到 CSS 的 图 标 、 
形状 、 按 钮 、 背 景 和 徽标 ， 还 有 一 些 用 到 了 语义 HIML， 甚 至 有 些 实例 使 用 大 量 额外 的 div 或 span 
标记 来 获得 本 应 是 图 像 的 效果 。 如 果 正 在 阅读 本 书 ， 你 会 对 此 有 更 深刻 的 理解 。 要 巧妙 地 使 用 CSS3 
属性 ， 明 白 何 时 使 用 才 是 合适 的 。 


思考 和 练习 


1. 在 设置 多 个 背景 时 默认 如 何 排列 ， 如 何 进行 位 置 的 控制 ? 

2. 给 所 有 的 div 元 素 设置 背景 从 白色 渐变 到 灰色 #666 的 代码 是 什么 ? 

3. 浏览 本 书 中 创建 的 所 有 页 面 ， 在 需要 CSS3 属性 的 地 方 添加 这 些 属性 ， 背景 可 以 用 来 添加 深 
度 ， 按 钮 需要 更 强 的 功能 可 见 性 ， 内 容 可 以 使 用 图 形 边框 ， 文 本 需要 一 些小 心 创建 的 阴影 等 。 

4. 在 这 个 练习 中 ， 需 要 使 用 border-radius 以 及 过 渡 模块 创建 一 种 平滑 的 悬浮 效果 。 页 面 中 的 悬 
浮 效 果 应 如 图 10-57 所 示 。 样 式 表 应 实现 以 下 功能 : 

e@ ”为 :hover 以 及 标准 状态 设置 1 秒 的 过 渡 。 过 渡 border-radius 和 background-color 属性 。 

@ ”在 吉 over:hover 的 定义 中 ， 将 背景 色 修 改 为 #HO0ccff， 并 将 border-radius 修改 为 100 像素 ， 这 

将 使 盒子 模型 成 为 一 个 圆 。 


297 


HTML5+CSS3 网 页 设计 实 便 教程 


10-57 页 面 中 的 悬浮 效果 
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页 面 布局 与 媒体 查询 


本 章 将 介绍 如 何 使 用 CSS 布置 元 素 ,创建 CSS 布局 .这 是 CSS 以 前 的 一 个 弱点 一 一 基于 CSS2.1 
的 布局 技术 使 用 原本 不 用 于 页 面 布局 的 属性 , 不 适合 目前 的 Web 应 用 程序 。 本 章 首先 复习 基础 知识 : 
CSS 盒子 模型 、 浮 动 、 定 位 ， 以 及 如 何 使 用 它们 创建 灵活 而 确定 的 页 面 布局 。 接 着 讨论 媒体 查询 的 
潜在 功能 ， 以 及 如 何 调整 CSS。 最 后 讨论 CSS3 布局 规范 的 未 来 。 


本 章 的 学 习 目标 : 

e@ 了 解 CSS 盒子 模型 的 概念 

e 掌握 使 用 CSS 定位 与 布局 的 方法 
e@ 了 解 媒体 查询 功能 

e@ 了 解 CSS3 布局 规范 


四 可 信子 模型 


“盒子 模型 ”也 称 为 方 框 模型 ， 在 CSS 中 是 一 个 很 重要 的 概念 ， 因 为 它 决定 了 元 素 在 浏览 器 窗 
口中 如 何 定位 。 其 因 CSS 在 处 理 每 个 元 素 时 都 好 像 元 素 位 于 一 个 盒子 中 而 得 名 。 在 表 11-1 中 可 见 ， 
每 个 盒子 模型 都 有 三 个 必须 了 解 的 属性 。 


表 11-1 盒子 模型 的 三 个 重要 属性 


属 性 描述 
border 即使 不 可 见 ， 每 个 盒子 也 都 有 一 条 边框 。 边 框 将 一 个 盒子 的 边界 与 周围 其 他 盒子 相 分 离 
margin 是 从 盒子 边框 到 下 一 个 盒子 的 距离 ( 即 外 边 距 ) 


ing 是 元 素 内 容 与 盒子 边框 的 距离 ( 即 内 边 距 


通过 图 11-1 可 更 好 地 理解 盒子 模型 。 图 1-1 中 展示 了 盒子 的 不 同 部 分 ， 其 中 黑 线 即 边框 。 

可 以 使 用 CSS 在 盒子 的 不 同 边缘 分 别 控制 边框 、 外 边 距 以 及 内 边 距 ， 并 为 盒子 每 侧 的 边框 指定 
不 同 的 宽度 、 线 型 以 及 颜色 。 

在 创建 设计 师 们 所 说 的 “空白 区 域 ” 时 ，padding 及 margin 属性 特别 重要 。 空 白 区 域 即 页 面 中 
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不 同 部 分 之 间 的 空间 。 例 如 ， 对 于 有 一 条 黑色 边框 且 包 含 黑色 文本 的 盒子 ， 如 果 不 希 望 文本 难以 阅 
读 ， 需 要 使 文本 不 接触 边框 。padding 属性 能 帮助 将 文本 与 边框 分 开 。 

同时 ， 假 设 有 两 个 相 邻 的 盒子 ， 并 且 两 个 盒子 都 有 边框 。 如 果 二 者 间 没 有 外 边 距 ， 那 么 两 个 盒 
子 会 出 现 重 毒 ， 二 者 相 邻 处 的 线 则 可 能 比 其 他 线 更 粗 。 

对 于 外 边 距 而 言 ， 还 有 一 个 有 趣 的 问题 : 当 一 个 盒子 的 下 外 边 距 与 另 一 个 盒子 的 上 外 边 距 相遇 
时 ， 只 有 其 中 盒子 尺寸 较 大 的 那个 会 显示 出 来 ， 如 果 两 个 盒子 的 尺寸 相同 ， 于 
距 中 较 大 的 那个 。 图 11-2 展示 了 两 个 相 邻 盒子 间 的 垂直 外 边 距 被 压缩 了 , 这 种 情况 仅 适用 于 垂直 外 
边 距 ， 不 适用 于 左右 外 边 距 。 
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图 11-1 盒子 模型 示意 图 图 11-2 ”两 个 相 邻 盒子 间 垂 直 外 边 距 的 压缩 


11.1.1 一 个 演示 盒子 模型 的 示例 


为 演示 盒子 模型 ， 可 以 为 网 页 中 的 每 个 元 素 添加 一 条 边框 。<body> 元 素 创建 了 一 个 包含 整个 页 
面 的 大 盒子 ， 而 在 其 内 部 ， 每 一 个 标题 、 段 落 、 图 片 或 链接 都 会 创建 另 一 个 盒子 。 首 先 ， 以 下 是 示 
例 页 面 的 HTML 代码 : 

<hl>Thinking Inside the Box</h1> 

<p class="description">When you are styling a web page with CSS you must start to think in terms of <b>boxes</b>.</p> 

<p>Each element is treated as if it generates a new box. Each box can have new rules associated with it.</p> 

<img sre="images/boxmodel.gif" alt="How CSS treats abox"> 

<p>As you can see from the diagram above. each box has a <b>border</b>. Between the content and the border you can have 
<b>padding</b>, and outside of the border you can have a <b>margin</b> to separate this box from any neighboring boxes.</p> 

只 需要 使 用 一 条 CSS 规则 , 就 可 以 看 到 文档 主体 中 包含 的 每 一 个 元 素 一 一 <body>、<h2>、<p>、 
<img> 以 及 <b> 一 一 就 像 在 独立 的 盒子 中 一 样 进行 处 理 。 为 此 ， 可 添加 一 条 CSS 规则 ， 在 每 个 元 素 
周围 添加 边框 。 


body, hl, p, img, b { 
‘border-style : solid: 


每 个 盒子 可 以 通过 不 同方 式 呈现 。 例 如 ， 可 以 为 <hl]> 和 <bold> 元 素 赋予 灰色 背景 ， 从 而 帮助 将 
之 与 其 他 元 素 相 区 分 。 


hl,b{ 
background-color : #ccccce: 
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图 11-3 展示 了 这 个 页 面 在 浏览 器 中 的 效果 。 尽 管 不 是 太 吸 引 人 , 但 其 中 的 线 型 展示 了 盒子 的 边 
框 ， 也 展示 了 每 个 元 素 的 盒子 是 如 何 创建 的 。 


图 11-3 盒子 在 浏览 器 中 的 效果 


块 级 元 素 与 行内 元 素 的 区 别 在 使 用 CSS 时 非常 重要 ， 因 为 这 决定 了 每 个 盒子 如 何 显示 。 

e@ “<hl1> 与 <p> 元 素 是 块 级 元 素 。 每 个 块 级 元 素 都 从 新 行 开始 ， 并 且 包 含 该 块 级 元 素 的 盒子 会 占 
据 浏览 器 的 全 部 宽度 ， 或 者 占据 其 上 级 元 素 的 全 部 宽度 。 

e@ <b> 元 素 是 行内 元 素 。 它 的 盒子 位 于 段落 中 间 ， 并 且 不 会 占据 整 行 的 宽度 ， 它 会 在 其 包含 元 
素 内 流动 。 

e <img> 元 素 可 能 看 起 来 像 块 级 元 素 ， 因 为 它 以 新 行 开始 。 但 它 其 实 是 行内 元 素 。 之 所 以 这 么 
说 ， 是 因为 它 的 边框 只 占据 图 片 自身 的 宽度 。 而 如 果 它 是 块 级 元 素 ， 边 框 会 横 跨 浏览 器 的 
整个 宽度 。 图 片 之 所 以 从 新 行 开始 ， 仅 仅 是 因为 它 两 侧 的 元 素 都 是 块 级 元 素 (因此 ， 它 周转 
的 元 素 会 从 新 行 开始 )。 


11.1.2 border 属性 


border 属性 能 够 指定 代表 某 一 元 素 的 盒子 的 边框 应 如 何 呈 现 。 一 条 边框 具有 三 个 可 以 修改 的 属 
性 : border-color 属性 ， 用 于 指定 边框 应 具有 的 颜色 ;border-style 属性 ， 用 于 指定 边框 应 为 实 线 、 虚 
线 还 是 双 线 ，borer-width 属性 ， 用 于 指定 边框 应 具有 的 宽度 。 

1. border-color 属性 


border-color 属性 能 够 改变 盒子 周围 边框 的 颜色 ， 可 以 是 任何 有 效 的 颜色 值 。 例 如 : 
pt 
border-color : #00f000: 
} 
可 以 使 用 以 下 属性 分 别 指定 盒子 边框 的 底部 、 左 侧 、 项 部 以 及 右 侧 的 颜色 : 


border-bottom-color ”border-right-color ”border-top-color border-left-color 
2. border-style 属性 


border-style 属性 能 够 指定 边框 的 线 型 样式 : 
PE 
border-style : solid: 
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该 属性 的 默认 值 为 none， 因 此 没有 任何 边框 会 被 自动 显示 。 表 11-2 给 出 了 border-style 属性 的 
取 值 。 


表 11-2 border-style 属性 的 取 值 


值 描 述 
none 不 存在 边框 (等 价 于 border-width:0) 
solid 边框 是 一 条 实心 线 
dotted 边框 是 一 系列 的 点 
dashed 边框 是 一 系列 短线 
double 边框 是 两 条 实心 线 。 通 过 border-width 属性 的 值 为 其 创建 整体 宽度 以 及 两 条 线 的 间距 
Broove 边框 具有 切入 效果 
Tidge 边框 效果 与 groove 相反 
inset 边框 使 盒子 看 起 来 内 幅 于 页 面 中 
outset 边框 使 盒子 看 起 来 突出 于 画布 之 外 
hidden 与 none 相同 ， 但 用 于 作为 表格 元 素 的 边框 冲突 解决 方案 


图 11-4 展示 的 示例 中 包含 每 个 属性 的 效果 。 注 意 ， 尽 管 图 11-4 中 的 最 后 四 个 示例 看 上 去 类 似 ， 
但 实际 上 却 不 同 。 


图 11-4 borderstyle 属性 的 显示 效果 
可 以 使 用 如 下 属性 分 别 修改 盒子 边框 的 底部 、 右 侧 、 顶 部 以 及 左 侧 样式 : 
border-bottom-style «border-right-style «border-top-style -border-left-style 


3. border-width 属性 
border-width 属性 能 够 设置 边框 的 宽度 。 通 常 宽度 以 像素 为 单位 指定 。 


border-width 属性 的 值 不 能 为 百分数 。 不 过 可 以 使 用 任何 绝对 或 相对 单位 , 或 者 使 用 下 列 三 个 值 
之 一 : thin、medium 以 及 thick。 这 三 个 值 的 实际 宽度 在 CSS 中 没有 以 像素 明确 指定 ， 因 此 这 些 关 
键 字 对 应 的 实际 宽度 取决 于 浏览 
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可 以 使 用 如 下 属性 分 别 修改 盒子 边框 的 底部 、 右 侧 、 顶 部 以 及 左 侧 宽度 : 


4. 使 用 缩 略 形式 表达 边框 属性 
可 以 只 用 一 个 属性 来 指定 线 型 的 颜色 、 样 式 以 及 宽度 : 


PT{ 
border : 4px solid red: 
} 
如 果 使 用 这 样 的 缩 略 形式 ， 那 么 在 值 与 值 之 间 ( 除 空格 外 ) 不 能 有 任何 内 容 。 以 同样 方式 还 可 以 
使 用 以 下 属性 分 别 指定 盒子 每 侧 边 框 的 颜色 、 样 式 以 及 宽度 : 


border-bottom = border-top border-left border-right 


11.1.3 ”padding 属性 


padding 属性 指定 元 素 内 容 与 其 边框 之 间 应 显示 的 距离 : 

td{ 
padding : 5px; 

} 

该 属性 的 值 多数 使 用 像素 指定 。 不 过 ， 也 可 以 使 用 之 前 介绍 过 的 任何 长 度 单位 、 百 分 比 或 关键 
字 inherit。 

元 素 的 内 边 距 默认 不 会 继承 ,因此 如 果 <body> 元 素 有 一 个 值 为 50px 的 padding 属性 , 那么 它 不 
会 自动 应 用 于 其 内 部 的 所 有 其 他 元 素 。 只 有 当 关 键 字 inherit 被 用 于 某 元 素 时 ， 该 元 素 才 会 使 用 与 父 
元 素 相同 的 内 边 距 。 

如 果 使 用 了 百分比 ， 则 以 包含 盒子 的 百分比 计算 ; 如 果 指 定 为 10%， 则 每 一 边 取 盒子 的 5% 作 
为 内 边 距 。 

可 以 使 用 如 下 属性 分 别 指定 盒子 内 每 一 边 的 不 同 内 边 距 大 小 : 

padding 属性 在 用 于 创建 元 素 边框 与 其 内 容 之 间 的 空白 时 特别 有 用 。 查 看 图 11-5， 其 中 有 两 个 


图 11-5 padding 属性 的 显示 效果 
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如 果 看 一 下 这 两 个 段落 元 素 的 CSS 规则 ,可 以 看 到 默认 情况 下 第 一 个 段落 没有 内 边 距 。 如 果 需 
要 第 二 段 中 所 示 的 间隔 ， 则 必须 指定 。 


有 时 ， 元 素 可 能 没有 可 见 的 边框 ， 但 具有 背景 色 或 图 案 。 这 种 情况 下 ， 为 盒子 赋予 一 些 内 边 距 
有 助 于 使 设计 更 吸引 人 。 


11.1.4 margin 属性 


margin 属性 控制 盒子 之 间 的 空间 。 它 的 取 值 可 以 是 长 度 、 百 分 比 或 关键 字 inherit， 每 种 取 值 的 
含义 与 刚才 所 见 的 padding 属性 完全 相同 。 

p{ 

margin:20px; 

} 

与 padding 属性 一 样 ， 除 非 取 值 为 nherit， 否 则 margin 属性 的 值 也 不 会 被 子 元 素 继承 。 

此 外 ， 记 住 当 一 个 盒子 位 于 另 一 个 盒子 上 时 ， 只 有 二 者 中 较 大 的 那个 盒子 的 外 边 距 会 显示 ， 如 
果 两 个 盒子 相等 ， 则 只 显示 其 中 一 个 盒子 的 大 小 。 

还 可 以 使 用 如 下 属性 为 盒子 的 每 一 边 分 别 设置 不 同 的 外 边 距 值 : 

rs Pa in-righ 

查看 图 11-6， 可 以 看 到 三 个 段落 ， 并 且 看 上 去 它们 占据 相同 的 空间 。 然 而 ， 它 们 顶部 的 外 边 距 
要 高 于 底部 ， 因 此 当 两 个 盒子 相遇 时 ， 底 部 的 外 边 距 会 被 忽略 一 外边 距 被 压缩 了 ， 这 种 情况 只 发 
生 于 垂直 外 边 距 ， 而 不 发 在 于 左右 外 边 距 。 

这 个 示例 还 展示 了 如 何 设置 行内 元 素 左右 两 侧 的 外 边 距 一 一 单词 被 高 亮 显示 的 区 域 。 通 过 这 个 
示例 ， 我 们 演示 了 块 级 元 素 与 行内 元 素 的 盒子 如 何 使 用 外 边 距 。 


11-6 ”margin 属性 的 显示 效果 


第 11 章 页 面 布局 与 媒体 查询 


在 段落 中 ， 为 使 用 <em> 元 素 进行 强调 显示 的 短语 设置 了 margin-left 及 margin-right 属性 。 因 为 
还 为 <em> 元 素 同时 设置 了 背景 色 , 所 以 可 以 实际 看 到 左右 两 侧 的 外 边 距 如 何 将 这 些 单词 与 周围 的 其 
他 单词 分 开 。 

如 下 是 本 例 中 的 规则 : 


11.1.5 ”内 容 盒子 的 尺寸 


前 面 介绍 了 环绕 所 有 内 容 盒 子 的 边框 、 可 以 出 现 于 每 个 内 容 盒子 边框 内 的 内 边 距 以 及 位 于 边框 
外 的 外 边 距 ， 下 面 介绍 控制 内 容 盒子 尺寸 的 属性 ， 如 表 11-3 所 示 。 


表 11-3 控制 内 容 盒子 尺寸 的 属性 


属 性 作 用 

hei 设置 内 容 盒子 的 高 度 

width 设置 内 容 盒 子 的 宽度 

line-height 设置 文本 行 的 高 度 (如 布局 方案 中 的 行距 ) 
max-height 设置 内 容 盒子 的 最 大 高 度 

min-height 设置 内 容 盒子 的 最 小 高 度 

max-width 设置 内 容 盒子 的 最 大 宽度 

min-width 设置 内 容 盒子 的 最 小 宽度 


1. height 与 width 属性 

height 与 width 属性 能 够 设置 内 容 盒子 的 高 度 与 宽度 。 它们 的 取 值 可 以 为 长 度 值 、 百 分 比 或 关键 
字 auto。 默 认 值 为 aato， 其 含义 为 内 容 盒子 的 大 小 刚好 足够 容纳 其 内 容 。 

如 下 是 用 于 两 个 段落 元 素 的 CSS 规则 ， 第 一 个 段落 带 有 值 为 one 的 class 特性 ， 第 二 个 段落 带 
有 值 为 two 的 class 特性 : 
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} 

如 图 11-7 所 示 , 第 一 个 段落 宽 200 像素 、 高 100 像素 , 而 第 二 个 段落 宽 300 像素 、 高 100 像素 。 
最 常用 的 测量 盒子 的 单位 为 像素 。 不 过 ， 百 分 比 及 em 经 常用 于 为 适应 浏览 器 窗口 尺寸 而 自动 拉 伸 
或 压缩 的 布局 。 


2. line-height 属性 


line-height 是 进行 文本 布局 时 最 重要 的 属性 之 一 。 它 能 够 增加 文本 行 之 间 的 空间 ， 即 “行距 ”。 
line-height 属性 的 值 可 以 是 长 度 值 或 百分比 。 应 该 使 用 与 设置 文本 尺寸 时 相同 的 测量 单位 指定 
该 属性 。 如 下 是 两 条 设置 不 同 line-height 属性 的 规则 : 
Pitwo { 
line-height : 16px; 
} 
Pthree { 
line-height : 28px; 
} 
如 图 11-8 所 示 ， 第 一 个 段落 没有 line-height 属性 ， 而 第 二 和 第 三 个 段落 则 与 前 面 的 规则 相对 应 。 
为 每 个 文本 行 添加 额外 高 度 可 以 使 其 可 读 性 更 好 ， 对 于 长 文章 更 是 如 此 。 


图 11-7 height 与 width 属性 的 显示 效果 图 11-8 line-height 属性 的 显示 效果 
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在 长 段落 中 可 以 尝试 使 用 1.5 倍 字体 高 度 的 行距 。 当 需要 在 单行 文本 周围 添加 空间 时 ,line-height 
属性 也 能 提供 帮助 。 


3. max-width 与 min-width 属性 


max-width 与 min-width 属性 能 够 指定 内 容 盒子 的 最 大 及 最 小 宽度 。 当 需要 创建 可 以 适应 用 户 窗 
口 尺寸 、 自 动 拉 伸 或 压缩 的 页 面部 分 时 ， 它 们 应 该 特别 有 帮助 。max-width 属性 可 以 防止 盒子 变 得 
太 宽 以 至 于 难以 阅读 ， 而 min-width 属性 则 能 够 帮助 防止 盒子 变 得 太 罕 以 至 于 无 法 阅读 。IE7 以 及 
Firefox 2 是 最 先 支持 这 两 个 属性 的 主流 浏览 器 。 
这 两 个 属性 的 取 值 可 以 是 数字 、 长 度 值 或 百分比 ， 而 且 不 允许 为 负 值 。 例 如 ， 查 看 如 下 规则 ， 
其 中 指定 <div> 元 素 的 宽度 不 可 小 于 200 像素 ， 且 不 能 大 于 500 像素 : 
div{ 
min-width : 200px; 
max-width : 500px; 
padding : Spx; 
‘border : 1px solid #000000; 
} 
图 11-9 展示 了 效果 ， 其 中 包含 两 个 浏览 器 窗口 。 第 一 个 窗口 以 大 于 500 像素 的 宽度 打开 ， 而 盒 
子 并 没有 伸展 到 大 于 500 像素 宽 。 第 二 个 窗口 在 小 于 200 像素 的 情况 下 关闭 ， 此 时 浏览 器 因为 无 法 
显示 盒子 的 完整 宽度 而 出 现 了 水 平 滚动 条 。 


4. min-height 与 max-height 属性 


min-height 与 max-height 属性 和 min-width 与 max-width 属性 对 应 ， 但 它们 用 于 指定 内 容 盒子 的 
最 小 高 度 及 最 大 高 度 。 同 样 ，IE7 以 及 Firefox 2 是 最 先 支持 这 两 个 属性 的 主流 浏览 器 。 
这 两 个 属性 的 取 值 可 以 是 数字 、 长 度 值 或 百分比 ， 而 且 不 允许 为 负 值 。 查 看 如 下 示例 : 
div{ 
min-height : 150px: 
max-height : 200px; 
Padding : Spx; 
border : 1px solid #000000; 
} 
同样 , 这 两 个 属性 在 创建 能 够 根据 用 户 浏览 器 窗口 尺寸 调整 自身 尺寸 的 布局 时 非常 有 用 。 然而 ， 
可 以 在 图 11-10 中 看 到 一 个 有 趣 的 现象 : 盒子 的 内 容 如 果 占 据 的 空间 大 于 规则 允许 盒子 本 身 占据 的 
空间 ， 那 么 这 些 内 容 会 溢出 盒子 。 


11-9 ”max-width 与 min-width 属性 的 显示 效果 11-10 ”min-heisht 与 max-height 属性 的 显示 效果 
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5. overflow 属性 


如 图 11-10 所 示 ， 在 控制 盒子 的 尺寸 时 ， 需 要 在 盒子 中 放下 的 内 容 可 能 比 允 许 的 空间 更 大 。 
overflow 属性 用 于 处 理 这 类 情况 ， 取 值 如 表 11-4 所 示 。 


表 11-4 overflow 属性 的 取 值 


值 作 用 
hidden, 滋 出 内 容 会 被 隐藏 
visible 溢出 内 容 在 盒子 外 可 见 
scroll 盒子 将 添加 滚动 条 以 允许 用 户 滚动 查看 其 内 容 
auto 盒子 在 必要 时 会 添加 滚动 条 
inherit 盒子 从 父 元 素 继承 overflow 属性 


现在 查看 以 下 示例 ， 其 中 两 个 <div> 元 素 的 宽度 通过 max-height 及 max-width 属性 控制 ， 从 而 
<div> 元 素 的 内 容 不 会 适应 盒子 的 大 小 。 对 于 第 一 个 <div> 元 素 , 将 overflow 属性 的 值 设置 为 hidden; 
对 于 第 二 个 <div> 元 素 , 将 overflow 属性 的 值 设置 为 scroll。 这 两 个 属性 的 效果 如 图 11-11 所 示 。 在 第 

-个 盒子 里 ， 文 本 在 空间 用 完 时 被 简单 截断 ， 在 第 二 个 盒子 里 ， 创 建 了 一 个 滚动 条 ， 人 允许 用 户 滚动 
到 适当 内 容 。 


‘ecomient being larger Ml 


图 11-11 overflow 属性 的 显示 效果 


6. IE 盒子 模型 以 及 box-sizing: border-box 


在 CSS 发 展 的 早期 ， 引 入 了 两 种 相互 竞争 的 盒子 模型 。 其 中 一 个 已 经 作为 CSS 标准 存在 了 很 
多 年 ， 而 另 一 个 则 是 由 早期 版 本 的 正 引入 的 。 早 期 版 本 的 正 在 处 理 盒子 的 宽度 时 ， 效 果 就 像 盒子 
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的 宽度 包含 了 边框 宽度 以 及 盒子 尺寸 中 的 内 边 距 。 根据 CSS 规范 中 的 描述 ,盒子 的 宽度 应 该 为 其 中 
内 容 的 宽度 ， 不 包含 边框 以 及 内 边 距 。 图 11-12 展示 了 上 述 效 果 。 


W3C 盒子 模型 正 盒 子 模型 
外 边 距 外 边 距 
边框 边框 
内 边 距 内 边 距 


内 容 内 容 
宽度 宽度 


图 11-12 W3C 盒子 模型 与 IE 盒子 模型 


新 的 CSS box-sizing 属性 能 够 在 W3C 盒子 模型 和 正 盒子 模型 间 进行 选择 .IE8 及 其 更 高 版 本 和 
其 他 主流 浏览 器 都 支持 该 属性 。 


使 用 CSS 定位 与 布局 


CSS 定位 方案 是 Web 中 控制 页 面 布 局 的 标准 方式 。 在 CSS 中 可 以 使 用 盒子 模型 表现 每 个 元 素 
中 的 内 容 ， 用 属性 影响 盒子 及 其 内 容 。 使 用 CSS 控制 盒子 在 页 面 中 出 现 的 位 置 ， 被 称 为 CSS 定位 
与 布局 。 

注意 : 

在 CSS 之 前 , 通常 使 用 表格 控制 网 页 的 布局 。 但 表格 的 设计 初 襄 是 容纳 表格 化 数据 ， 所 以 应 该 
使 用 CSS 代替 表格 控制 新 建 页 面 的 布局 。 使 用 CSS 控制 布局 ， 页 面 将 变 得 更 小 ， 更 易于 兼容 不 同 
设备 ， 更 易于 重新 设计 ， 加 载 速度 更 快 ， 更 易于 被 搜索 引擎 找到 。 


11.2.1 正常 流 


默认 情况 下 ， 使 用 “正常 流 ” 或 “静态 流 ” 在 页 面 中 对 元 素 进行 布局 。 在 正常 流 中 ， 页 面 中 的 
块 级 元 素 从 项 部 向 底部 流动 , 每 个 块 级 元 素 都 以 独占 新 行 的 形式 出 现 , 而 行内 元 素 则 从 左 向 右 流动 ， 
因为 它们 不 会 从 新 行 开始 显示 。 

例如 ， 每 个 标题 以 及 段落 应 该 在 不 同 的 行 中 显示 ， 而 <b>、<em> 以 及 <span> 这 类 元 素 的 内 容 则 
位 于 段落 或 另 一 个 块 级 元 素 中 。 它 们 并 不 从 新 行 开始 显示 。 

图 11-13 使 用 三 个 段落 展示 了 这 一 点 。 其 中 每 个 段落 都 是 一 个 块 级 元 素 , 位 于 另 一 个 段落 之 上 。 


图 11-13 ”正常 流 的 显示 效果 
如 果 和 希望 元 素 的 内 容 出 现在 与 正常 流 中 不 同 的 位 置 ,有 两 个 属性 可 以 提供 帮助 :position 和 float。 
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11.2.2 ”position 属性 


position 属性 能 够 指定 希望 如 何 控制 盒子 的 位 置 , 通常 用 于 将 项 抽 离 正常 流 。 四 个 可 能 的 取 值 如 
表 11-5 所 示 。 


表 11-5 ”position 属性 的 取 值 


值 2 
static 与 正常 流 相同 ， 并 且 为 默认 值 
Telative 盒子 的 位 置 可 以 相对 其 在 正常 流 中 的 位 置 出 现 偏 移 
absolute | 盒子 完全 使 用 以 包含 元 素 左 上 角 为 原点 的 x 及 y 坐标 进行 定位 
fixed 位 置 以 浏览 器 窗口 左上 角 为 原点 计算 得 出 ， 并 且 不 随 用 户 滚动 窗口 而 改变 位 置 


11.2.3 ”盒子 偏 移 属性 


当 盒子 的 position 属性 的 值 为 relative、absolute 或 fixed 时 ， 它 们 同时 会 使 用 “盒子 偏 移 ” 属 性 
指定 盒子 应 如 何 定位 。 表 11-6 列 出 了 盒子 偏 移 属 性 。 


表 11-6 盒子 偏 移 属 性 


从 包含 元 素 项 部 起 的 偏 移 位 置 


从 包含 元 素 左 侧 起 的 偏 移 位 置 
从 包含 元 素 底部 起 的 偏 移 位 置 
从 包含 元 素 右 侧 起 的 偏 移 位 置 


表 11-6 中 的 每 个 属性 可 以 取 长 度 值 、 百 分 比 或 关键 字 auto。 相 对 单位 ， 包 括 百分比 ， 使 用 包含 
盒子 的 尺寸 或 属性 进行 计算 。 


11.2.4 ”相对 定位 


相对 定位 能 够 将 盒子 移动 到 与 正常 流 中 的 位 置 相关 联 的 某 个 位 置 。 比 如 ， 将 一 个 盒子 从 正常 流 
中 应 该 出 现 的 位 置 下 移 30 像素 或 右 移 100 像素 , 它 将 根据 盒子 偏 移 属性 从 正常 流 中 的 位 置 进行 转移 。 
回 到 11.2.3 节 演示 正常 流 的 示例 ， 使 用 相对 定位 移动 第 二 段 ， 如 图 11-14 所 示 。 


图 11-14 ”相对 定位 的 显示 效果 


本 例 中 的 第 二 段 从 其 在 正常 流 中 应 处 的 位 置 ( 即 它 在 上 一 示例 中 所 处 的 位 置 ) 发 生 了 偏 移 ， 偏 移 
量 为 左 起 40 像素 、 上 起 40 像素 ， 注 意 负 号 ， 它 将 段落 抬 到 了 正常 流 位 置 之 上 。 
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盒子 偏 移 属性 的 值 最 常 使 用 像素 值 或 百分比 。 


注意 : 
应 该 仅 指定 左 侧 或 右 侧 偏 移 ， 以 及 顶部 或 底部 偏 移 。 如 果 同 时 指定 了 左 侧 与 右 侧 偏 移 ， 或 同时 
指定 了 顶部 与 底部 偏 移 ， 那 么 右 侧 或 底部 偏 移 将 被 忽略 。 


在 使 用 相对 定位 时 ， 一 些 盒子 可 能 会 咕 盖 另 一 些 盒子 ， 如 前 例 中 所 示 。 因 为 对 盒子 相对 于 正常 
流 进 行 了 偏 移 ， 所 以 如 果 偏 移 量 足 够 大 ， 一 个 盒子 最 终 就 可 能 位 于 另 一 个 盒子 之 上 。 然 而 ， 有 两 个 
陷阱 必须 了 解 : 
。 除非 为 盒子 设置 背景 (无 论 背景 色 还 是 图 片 都 可 以 )， 否 则 盒子 默认 是 透明 的 ， 这 使 得 任何 相 
互 覆 盖 的 文本 成 为 无 法 阅读 的 混乱 内 容 。 在 前 例 中 ， 使 用 background-color 属性 将 段落 的 背 
景 设置 为 白色 ， 从 而 防止 了 这 种 情况 的 发 生 。 
e@ CSS 规范 没有 说 明 当 相对 定位 元 素 相互 区 盖 时 ， 哪 个 元 素 应 位 于 顶部 。 因 此， 在 不 同 的 浏 
览 器 中 就 可 能 出 现 不 同 的 结果 。 


11.2.5 ”绝对 定位 


绝对 定位 是 指 将 元 素 从 正常 流 中 取出 ， 并 固定 其 位 置 。 可 以 为 元 素 应 用 值 为 absolute 的 position 
属性 ， 指 定 对 内 容 进 行 绝对 定位 。 之 后 可 以 使 用 盒子 偏 移 属性 对 其 进行 定位 。 

盒子 偏 移 属性 将 盒子 的 位 置 固定 于 与 “包含 块 ” 相关 联 的 位 置 一 包含 块 与 包含 元 素 稍微 不 同 
因为 它 特 指 position 属性 被 设置 为 relative、absolute 或 fixed 的 包含 元 素 。 

将 下 面 的 样式 表 再 次 用 于 上 述 三 个 段落 ， 但 这 一 次 ， 这 些 段 落 被 包含 于 一 个 同样 使 用 绝对 定位 
的 <div> 元 素 中 : 

divpage { 

position : absolute: 

left : 50px: 
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width : 200px: 
Padding : Spx; 
border-style : solid: 
border-color : #000000; 
border-width : 2px: 
} 
ptwo{ 
position : absolute; 
Jef : SOpx; 
top : -25px 
图 11-15 展示 了 绝对 定位 的 显示 效果 。 能 够 清楚 看 到 的 是 ， 
第 二 段 已 经 不 再 位 于 页 面 中 间 ， 已 经 被 从 正常 流 中 取出 ， 因 为 第 
三 段 现在 所 处 的 位 置 正好 是 第 二 段 在 正常 流 中 本 应 出 现 的 位 置 。 
它 甚至 出 现在 第 一 段 之 前 的 右上 方 。 此 处 出 现 的 <div 
class="page"> 元 素 展示 出 该 段落 是 根据 绝对 定位 的 <div> 元 素 进 
行 定 位 的 。 绝 对 定位 元 素 总 是 出 现在 相对 定位 元 素 之 上 ， 如 你 在 
本 例 中 所 见 ， 除 非 使 用 z-index 属性 进行 设置 。 
同样 还 需要 注意 的 是 ， 因 为 使 用 绝对 定位 的 盒子 被 从 正常 流 。 而 111 6 全 的 不 训 
中 取出 ， 所 以 即使 两 个 垂直 外 边 距 相遇 ， 它 们 的 外 边 距 也 不 会 
折 芝 。 


11.2.6 固定 定位 


对 于 position 属性 需要 了 解 的 最 后 一 个 可 取 值 是 fixed。 该 值 指定 不 仅 元 素 的 内 容 应 完全 从 正常 
流 中 移出 ， 而 且 该 盒子 在 用 户 上 下 滚动 页 面 时 也 不 应 该 移动 。 
Firefox、Safari 以 及 Chrome 为 固定 定位 提供 支持 ， 下 7 是 正 浏览 器 中 第 一 个 对 其 提供 支持 的 
版 本 。 
可 以 使 用 下 面 的 HTML 示例 来 演示 固定 定位 。 本 例 使 用 了 更 多 段落 ， 从 而 可 以 看 到 在 页 面 滚动 
时 ，<div> 元 素 的 内 容 在 页 面 项 部 保持 固定 。 
<div class="header">Beginning Web Development</div> 
<p class="one">This page has to contain several paragraphs so you can see 
the effect of fixed positioning. Fixed positioning has been used on the 
header so it does not move even when the rest of the page scrolls.</p> 
下 面 可 以 看 到 本 例 使 用 的 样式 表 。 标 题 具 有 值 为 fixed 的 position 属性 ， 并 被 定位 于 浏览 器 窗口 
的 左上 角 : 
div.header { 
Position : fixed; 
top: Opx; 
left : Opx: 
width : 1009%:; 
Padding : 20px: 
font-size : 28PX: 
color : HE 
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图 11-16 展示 了 这 个 固定 的 标题 元 素 在 用 户 将 页 面向 下 滚动 到 一 半 时 的 效果 。 


Ga 


图 11-16 这 个 固定 的 标题 元 素 的 显示 效果 


11.2.7 z-index 属性 


使 用 绝对 定位 和 相对 定位 的 元 素 常 与 其 他 元 素 出 现 重 合 。 发 生 这 种 情况 时 ， 默 认 的 行为 是 让 第 
一 个 元 素 位 于 后 来 元 素 之 下 。 这 称 为 “ 堆 合 上 下 文 ”。 可 以 使 用 z-index 属性 指定 哪个 盒子 位 于 顶部。 
在 图 形 设计 方案 中 ， 堆 营 上 下 文 与 使 用 “提高 到 顶部 ”以 及 “ 送 至 底部 ”的 功能 类 似 。 
z-index 属性 的 值 是 一 个 数字 ， 数 字 的 值 越 大 ， 就 越 接近 元 素 显 示 位 置 的 顶部 。 例 如 ，z-index 
值 为 10 的 项 会 出 现 于 z-index 值 为 5 的 项 之 上 。 
为 更 好 地 理解 z-index， 下 面 看 另 一 个 绝对 定位 示例 
<p class="one">Here is paragraph <b>one</b>. 
This will be at the top of the page.</p> 
<p class="two">Here is paragraph <b>two</b>. 
This will be undemeath the other elements.</p> 
<p class="three">Here is paragraph <b>three</b>. 
This will be at the bottom of the page.</p> 
每 个 段落 都 共享 相同 的 width、background-color、padding 以 及 border 属性 ， 这 些 属性 由 第 一 条 
规则 指定 。 这 样 做 可 以 免 于 对 每 一 个 <p> 元 素 重复 设置 相同 的 属性 。 然 后 对 每 一 段 都 分 别 使 用 绝对 


这 一 次 只 有 三 个 段落 : 
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定位 指定 其 位 置 。 因 为 现在 这 些 段 落 出 现 了 县 加 ， 所 以 z-index 属性 被 添加 进来 , 用 于 控制 哪个 段落 
位 于 顶部 。z-index 值 越 大 ， 结 果 越 接近 项 部 : 


| 
| 
| 
| 
| 
| 
| 
图 11-17 添加 z-index 属性 后 的 显示 效果 


11.2.8 ”使 用 float 属性 实现 流动 


float 属性 能 够 将 某 个 元 素 从 正常 流 中 取出 来 , 并 将 其 尽 可 能 远 地 放 置 在 包含 盒子 的 左 侧 或 右 侧 。 

包含 元 素 中 的 其 他 内 容 则 会 围绕 关联 有 float 属性 的 元 素 进行 流动 , 就 如 文本 与 其 他 元 素 能 够 围 
绕 图 片 流动 一 样 。 

任何 时 候 为 元 素 指定 float 属性 时 ， 都 必须 设置 width 属性 以 指定 盒子 应 该 占据 的 宽度 。 否 则 ， 
将 自动 占据 包含 盒子 100% 的 宽度 ， 不 会 给 围绕 它 流动 的 内 容留 任何 空间 ， 从 而 使 它 的 显示 效果 如 
同 普通 的 块 级 元 素 。 

为 指定 盒子 浮动 至 包含 盒子 的 左 侧 或 右 侧 ， 需 要 设置 float 属性 。 表 11-7 列 出 了 float 属性 的 取 值 。 
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表 11-7 float 属 性 的 取 值 


什 作 用 
1eft 盒子 浮动 到 包含 元 素 的 左 侧 ， 而 包含 元 素 的 其 他 内 容 浮动 至 其 右 侧 
罗 合子 浮动 到 包含 元 素 的 右 侧 ， 而 包含 元 素 的 其 他 内 容 浮动 至 其 左 侧 
2 | 合子 不 发 生 浮动 ， 并 保持 在 正常 流 中 应 处 于 的 位 置 
inherit 合子 继承 其 包含 元 素 的 属性 


当 一 个 盒子 使 用 float 属性 时 , 其 垂直 外 边 距 将 不 会 像 正常 流 中 的 块 级 盒子 一 样 在 其 上 下 发 生 压 
缩 ， 因 为 它 已 经 被 从 正常 流 中 抽取 出 。 浮 动 的 盒子 将 与 包含 盒子 的 顶部 对 齐 。 
查看 下 面 的 HTML 代码 ， 可 以 看 到 第 一 个 <aside> 元 素 带 有 值 为 pullQuote 的 class 特性 : 


<body> 
<hl>Heading</h1> 
<aside class="pullQuote">Here is the pullquote. It will be removed from 
normal flow and appear on the right of the page </aside> 
<p>This is where the story starts and it will appear at the top of the 
page under the heading. You can think of it as the first paragraph of an 
article or story. In this example, the pull quote gets moved across to the 
Tight of the page. There will be another paragraph underneath.</p> 
<p>Here is another paragraph. This one will be at the bottom of the page.</p> 
<body> 


如 上 例 所 示 ， 第 一 个 <p> 元 素 被 从 正常 流 中 抽 离 出 来 ， 并 使 用 值 为 right 的 float 属性 ， 放 置 于 包 
含 元 素 <body> 的 右 侧 : 


body { 
color : #000000: 
background-color : #fFFFT: 
font-size : 12px; 
margin : 10px; 
width : 514px: 
border : 1px solid #000000; 
} 
p{ 
background-color : #FFFFFF; 
border : 2px solid #000000; 
padding : Spx; 
margin : SPX: 
width : 500px: 
} 
pullQuote { 
float : right; 
width : 150px: 
} 
可 以 看 到 ， 带 有 值 为 pullQuote 的 class 特性 的 <aside> 元 素 的 内 容 最 终 出 现在 页 面 的 右 侧 ， 而 段 


落 的 内 容 流动 到 页 面 的 左 侧 和 底部 ， 如 图 11-18 所 示 。 
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图 11-18 ”使 用 float 属性 的 显示 效果 


11.2.9 clear 属性 


clear 属性 在 使 用 浮动 盒子 时 特别 有 用 。 内 容 能 够 围绕 浮动 元 素 流动 ， 如 图 11-19 所 示 。 然 而 ， 
如 果 希 望 浮动 元 素 的 旁边 没有 任何 内 容 ， 而 周围 的 内 容 被 推 至 浮动 元 素 之 下 ， 那 么 可 以 使 用 clear 
属性 。 表 11-8 列 出 了 clear 属性 的 取 值 。 


表 11-8 clear 属性 的 取 值 


具有 clear 属性 的 元 素 在 其 左 侧 不 能 有 任何 内 容 


具有 clear 属性 的 元 素 在 其 右 侧 不 能 有 任何 内 容 
具有 clear 属性 的 元 素 在 其 左右 两 侧 都 不 能 有 任何 内 容 
允许 两 侧 出 现 浮动 内 容 


现在 来 看 一 个 示例 。HTML 页 面 使 用 与 上 例 完 全 相同 的 结构 ， 但 是 这 一 次 ， 样 式 表 确 保 醒目 引 
文 旁 没 有 任何 内 容 。 
为 确保 第 二 段 不 会 环绕 在 醒目 引文 周围 ， 在 用 于 <aside> 元 素 的 规则 中 使 用 clear 属性 指定 其 左 
侧 不 应 出 现任 何 内 容 。 可 以 在 下 面 的 代码 中 看 到 clear 属性 被 高 亮 显示 : 
p{ 
background-color : #FFFFFF: 
border : 2px solid #000000; 
padding : Spx: 
margin : Spx: 
width : 500px:; 
clear : right 
| 


图 11-19 展示 了 本 例 中 的 clear 属性 是 如 何 工作 的 ， 它 确保 第 二 段 与 第 三 段位 于 醒目 引文 之 下 。 


二 下 HT 


loating 


图 11-19 clear 属性 的 显示 效果 
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构建 页 面 布 局 实例 


例 11-1: 利用 CSS 控制 页 面 布局 。 使 用 的 页 面 如 图 11-20 所 示 ， 其 中 没有 附加 的 样式 表 。 
下 面 是 本 例 中 HTML 代码 的 主体 : 


<body> 
<h1>Cascading Style Sheets</h1> 
<div class="nav"><a href="../index.htm">Examples index</a> 
&nbsp; <a href="11-1 html">Chapter 11 Code</a></div> 
<h2>CSS Positioning</h2> 
<p class="abstract"><img class="floatLeft" src= "images/background .gif" 
alt="wrox logo">This article introduces the topic of laying out 
Web pages in CSS using a combination of positioning schemes.</p> 
<p>CSS allows you to use three different positioning schemes to create complex layouts:</p> 


<p>By using a combination of these schemes you do not need to resort to using tables to lay out your pages.</p> 
<body> 


Euamplesndex Chaplecll code 


图 11-20 ”没有 附加 样式 表 的 页 面 


本 例 展示 了 在 使 用 CSS 时 你 应 该 了 解 的 一 些 问 题 ， 当 遇 到 一 些 有 用 的 属性 时 ， 其 中 一 部 分 可 能 
只 有 最 新 的 浏览 器 才 支持 ， 对 于 这 方面 的 展示 非常 重要 。 尽 管 能 以 某 种 在 大 多 数 浏览 器 中 工作 的 方 
式 设计 网 站 ， 却 可 能 无 法 让 一 些 技术 在 所 有 浏览 器 中 都 能 够 工作 ， 因 此 需要 彻底 地 测试 网 站 。 

在 Google Chrome 中 ， 本 例 的 效果 如 图 11-21 所 示 ， 可 以 在 IE7+ 中 看 到 类 似 的 结果 。 

图 11-22 展示 了 本 例 在 正 6 中 的 效果 。 特 别 需 要 注意 ， 在 左 侧 的 链接 之 前 不 再 有 单词 
“Navigation”， 并 且 标题 “CSS Positioning” 位 于 页 面 中 更 偏 下 的 位 置 。 因 此 ， 如 果 仍 然 有 使 用 IE6 
浏览 器 的 访问 者 ， 就 需要 考虑 哪些 特性 能 不 能 工作 ， 并 在 发 布 网 站 前 在 IE6 中 测试 页 面 。 最 好 了 解 
正 6 浏览 器 存在 的 一 些 局 限 性 。 
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ax 


日 和 ss 


ss 
C Ome/MeyHnasrcssynskniiiiiinm 0 


Cascading Style Sheets 


CSs Positioning 


图 11-21 网 页 在 Google Chrome 和 正 7+ 中 的 效果 图 11-22 网 页 在 IE6 中 的 效果 


为 开始 编写 本 例 使 用 的 CSS 文件 ， 打 开 网 页 编辑 器 并 遵照 以 下 步骤 进行 操作 。 
(1) 创建 一 个 名 为 11-1.css 的 文件 ， 添 加 来 自 HIML 页 面 的 元 素 ， 并 在 适 于 识别 每 一 类 元 素 的 
地 方 使 用 类 选择 器 。 最 终 应 该 得 到 一 个 与 下 面 类 似 的 列表 , 然后 可 以 依次 查看 用 于 每 个 元 素 的 规则 。 


body {} 

hl 人 

divnav 全 

Lo 

pO 

Pp.abstract {} 

img © 

ud 

(2) 为 用 于 <body> 元 素 的 规则 设置 页 面 的 一 些 默认 值 。 


body { 
color : #000000: 
background-color : #fFEF: 
font-family : arial, verdana. sans-serif 
font-size : 12px; 

} 


(3) 该 网 站 的 标题 使 用 固定 定位 ， 将 其 从 正常 流 中 抽 离 ， 并 且 即 使 在 用 户 滚动 页 面 时 ， 也 能 
其 固定 在 页 面 项 部 。 还 有 一 个 z-index 属性 ， 用 于 保证 标题 保持 在 导航 栏 项 部 。 


} 
(4) 导航 栏 同样 被 从 正常 流 中 抽 离 ， 因 为 其 使 用 的 是 绝对 定位 。 它 被 定位 于 项 部 向 下 80 像素 ， 
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因此 链接 在 页 面 首次 加 载 时 不 会 消失 于 页 面 标题 之 下 。 导 航 栏 被 放置 于 一 个 100 像素 宽 、300 像素 
高 ， 并 带 有 浅 灰色 背景 的 盒子 内 。 在 用 户 向 下 滚动 页 面 时 ， 导 航 栏 将 位 于 页 面 标题 之 下 ， 因 为 没有 
为 其 指定 z-index 属性 ， 而 标题 具有 值 为 2 的 z-index 属性 。 
divnav { 
position : absolute; 


} 
(5) 导航 栏 中 包含 单词 “Navigation”， 其 并 不 在 原始 HTML 文件 中 。 这 个 单词 是 在 样式 表 中 使 
用 CSS :before 伪 类 添加 的 。 可 以 在 下 面 的 代码 中 看 到 它 还 关联 了 其 他 样式 。 
divnav:before { 
content : "Navigation "; 
font-size : 18px; 
font-weight : bold; 
} 
(6) 用 于 <h2> 元 素 的 规则 需要 从 左 向 右 缩 进 ， 因 为 导航 栏 占据 了 左 侧 的 前 120 个 像素 ， 并 且 在 
其 顶部 还 有 内 边 距 ， 以 将 文本 置 于 标题 之 下 。 
wi{ 
Padding : 80px Opx Opx 130px: 
} 
(7) 有 两 条 用 于 段落 的 规则 。 第 一 条 规则 用 于 所 有 段落 ， 而 第 二 条 规则 用 于 确保 文章 的 摘要 以 
粗 体 显示 。 与 <h2> 元 素 相同 ， 所 有 段落 都 需要 从 左 向 右 缩 进 。 
p{ 
padding-left : 115px: 
} 
p.abstract{ 
font-weight : bold; 
} 
(8) 位 于 第 一 段 中 的 图 片 浮动 至 文本 的 左 侧 。 如 你 所 见 ， 段 落 中 的 文本 围绕 图 片 流动 。 此 外 ， 
图 片 的 右 外 边 距 为 5 像素 。 


(9) 用 于 无 序列 表 元 素 的 规则 ， 需 要 比 用 于 段落 或 二 级 标题 的 规则 缩 进 更 多 。 另 外 使 用 list-style 
属性 指定 了 列表 项 目 符号 的 样式 。 


uf 
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clear : left: 
list-style : circle: 
padding-left : 145px: 
} 
(10) 以 文件 名 11-1.css 保存 样式 表 ， 并 尝试 加 载 将 使 用 该 样式 表 的 11-1.html 文件 。 
使 用 CSS 对 网 页 进行 布局 既是 一 项 技术 ， 也 是 一 门 艺术 。 如 本 例 所 示 ， 成 功 的 布局 往往 结合 了 
两 种 或 更 多 种 布局 与 定位 技术 。 
例如 ， 对 于 带 有 浮动 列 的 布局 ， 可 能 将 其 中 一 列 设置 为 position:relative， 并 且 不 关联 偏 移 属性 ， 
从 而 在 该 列 内 绝对 定位 子 元 素 。 简 单 的 单列 布局 则 可 能 利用 浮动 元 素来 分 解 单一 堆 营 的 块 级 元 素 。 


媒体 查询 


媒体 查询 扩展 了 CSS 的 @media 规则 (通常 用 于 为 打印 或 语音 浏览 器 提供 样式 表 ) 以 及 HTML 中 
的 media 特性 ， 并 添加 了 用 于 显示 尺寸 、 色 深 以 及 高 宽 比 的 特性 。 这 使 得 能 够 基于 设备 或 浏览 器 特 
征 来 调整 设计 。 

媒体 查询 在 “响应 式 网 页 设计 ”中 扮演 着 重要 的 角色 ， 这 是 一 种 设计 开发 网 站 的 新 技术 ， 人 允许 
网 站 在 类 型 广泛 的 设备 上 进行 显示 。 

例 11-2: 下 面 的 代码 展示 了 媒体 查询 的 实际 使 用 。 标 记 很 简单 : 一 个 id 为 “container ”的 <div> 
元 素 包含 了 两 个 段落 。 

<div id="container"> 

<p>Proident accusamus readymade, exercitation wolf ullamco quinoa 
flexitarian chambray. Tattooed est gluten-free, tumblr ethical .</p> 
<p>Proident accusamus readymade. exercitation wolf ullamco quinoa 

flexitarian chamibray. Tattooed est gluten-free. tumblr ethical ...</p> 

</div> 

在 以 下 CSS 规则 中 , 定义 #container 元 素 具 有 940 像素 的 宽度 、200 像素 的 高 度 以 及 450 像素 的 
列 宽 。 接 下 来 ， 可 以 看 到 第 一 个 媒体 查询 。@media 启动 了 媒体 查询 ， 而 screen 关键 字 则 指明 本 条 
规则 用 于 屏幕 显示 媒体 (从 而 与 用 于 打印 机 或 语音 浏览 器 相 区 别 )。 之 后 的 and 关键 字 将 屏幕 显示 媒 
体 与 另 一 条 规则 ( 即 实际 查询 ) 绑 定 ， 也 就 是 值 为 999 像素 的 max-width。 这 条 规则 的 意思 是 : “如 果 
这 是 屏幕 显示 媒体 ， 并 且 屏 幕 的 宽度 不 大 于 999 像素 ， 则 应 用 以 下 CSS 规则 ”。 

与 实际 查询 对 应 的 规则 修改 了 width 属性 ， 以 更 好 地 匹配 显示 媒体 ， 还 修改 了 background-color 
以 及 column-width 属性 ， 以 更 好 地 匹配 新 布局 。 

第 三 条 规则 使 用 同样 的 模式 ， 但 使 用 不 同 的 值 。 这 条 规则 的 意思 是 : “如 果 这 是 屏幕 显示 媒体 ， 
并 且 屏 幕 宽度 不 大 于 480 像素 ， 则 应 用 以 下 CSS 规则 ”。 这 些 规则 修改 width 属性 以 匹配 新 的 屏幕 
解析 度 ， 修 改 height 属性 以 容纳 堆 共 的 列 ， 还 修改 了 background-color 属性 。 
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-webkit-column-width: 450px: 
-webkit-column-gap: 15px; 
-moz-column-width: 450px; 
-moz-column-gap: 15px; 
column-width: 450px: 
column-gap: 15px; 
} 
@media screen and (max-width:999px) { 
#container { 
width: 740px: 
background-color : #b3d4fe; 
-webkit-column-width: 350px: 
-webkit-column-gap: 15px; 
-moz-column-width: 350px; 
-moz-column-gap: 15px; 
column-width: 350px; 
column-gap: 15px; 
} 
} 
@media screen and (max-width:480px) { 
#container { 
width : 400px; 
background-color : #ffcc00; 
height : 400px; 
} 
} 


图 11-23 展示 了 在 Google Chrome 中 上 述 样式 表 的 三 种 状态 。 


图 11-23 在 Chrome 中 上 述 样式 表 的 三 种 状态 
表 11-9 指出 了 支持 媒体 查询 的 主流 浏览 器 。 


表 11-9 支持 媒体 查询 的 主流 浏览 器 


Intemet Explorer Opera 


9.0+ SE 
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CSS3 布局 


下 面 介绍 几 个 CSS3 布局 模块 ， 大 多 数 布局 模块 可 以 在 一 个 或 多 个 浏览 器 中 实现 。 


11.5.1 CSS3 定位 布局 模块 


CSS3 定位 布局 模块 规范 (CSS Positioned Layout Module Level 3) 包 括 基于 position 属性 的 定位 模 
式 。CSS3 版 本 引入 了 两 个 新 值 : position: center 提供 简单 的 水 平和 垂直 居中 功能 ， 使 用 top、tight、 
bottom 和 left 属性 可 以 偏 移 ，position: page 则 创建 一 个 使 用 绝对 定位 的 盒子 ， 这 个 盒子 相对 于 最 初 
的 包含 块 来 定位 , 可 以 在 页 面 媒体 中 标 上 页 号 。 这 些 属性 还 有 offset 组 , 其 行为 类 似 于 定位 属性 top、 
right 等 ， 可 用 于 多 语言 站 点 。 


11.5.2 CSS3 碎片 模块 


CSS3 碎片 模块 辅助 规范 (CSS Fragmentation Module Level 3) 为 分 隔 符 定义 了 属性 和 规则 ， 即 元 

素 因 为 CSS 布局 分 为 两 部 分 时 ， 元 素 的 内 容 如 何 处 理 。 属 性 用 于 设置 或 控制 多 列 布局 中 的 列 、CSS 

中 的 区 域 以 及 CSS Flexible Box Layout 中 弹性 容器 之 间 的 分 隔 符 。 它 们 与 前 面 在 CSS Paged Media 
Module Level 3 中 提 及 的 page-break-* 属 性 紧密 相关 ， 这 些 属性 如 下 。 

® ”break-before、break-after 和 break-inside: 以 如 下 方式 添加 和 控制 列 的 分 隔 符 一 一 breakrbefore 

和 break-after 的 值 是 auto、always、left、right、page、column、region、avoid、avoid-page、 


avoid-column 和 avoid-region; break-inside 的 值 是 auto、avoid、avoid-page、avoid-column 和 
avoid-region 。 


e ”ophans 和 widows: 分 别 控制 必须 在 元 素 中 间 的 分 隔 符 前 后 显示 的 元 素 内 容 的 最 少 行 数 ， 默 


认为 两 行 。 
要 在 内 容 块 的 前 后 显示 一 个 分 隔 符 ， 或 者 禁止 在 元 素 的 内 容 中 出 现 分 隔 符 ， 应 编写 如 下 代码 : 
article {break-after: always:} 


h3 {break-before: always:} 
table {break-inside: avoid:} 
p{ 

Widows: 4; 

orphans: 3; 
} 


11.5.3 ”多 列 布局 模块 


多 列 布局 模块 (Multi-column Layout Module) 能 为 单一 元 素 设置 多 个 列 。 有 两 种 方式 可 以 为 一 个 
元 素 设置 多 个 列 。 第 一 种 方式 是 使 用 column-count 属性 ， 它 简单 地 允许 为 元 素 设置 列 的 数量 。 另 一 
种 方式 是 使 用 column-width 属性 ， 它 能 够 为 每 一 列 设置 宽度 。 在 使 用 宽度 可 变 的 元 素 时 ， 这 样 做 有 
助 于 希望 通过 控制 列 的 宽度 以 提高 可 读 性 的 情况 。 

多 列 布局 模块 可 以 方便 地 给 元 素 添加 报纸 样式 的 列 。 主 要 属性 column-width 和 column-count 以 
及 快捷 属性 columns 为 元 素 的 内 容 创建 均匀 布置 的 列 框 。 因 为 是 CSS， 所 以 可 以 使 用 媒体 查询 改变 
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列 数 。 


下 面 是 多 列 属性 。 


column-width: 每 一 列 的 理想 宽度 。 例 如 ，{colunm-width: 1Sem:} 添 加 元 素 宽度 允许 的 ( 减 去 
column-gap 宽度 )、 多 个 15em 宽 的 列 ， 再 均匀 地 增加 列 宽 ， 以 填 满 元 素 的 宽度 。 不 能 使 用 
百分数 。 

column-count: 列 数 。 例 如 ，{column-width: 4;} 会 在 元 素 内 部 创建 大 小 均匀 的 列 。 

columns: 设置 column-width 和 /或 column-count。 给 定 两 个 值 时 ， 如 果 元 素 的 宽度 小 于 所 需 
宽度 ， 结 果 就 与 使 用 column-width 一 样 ， 如 果 元 素 的 宽度 大 于 所 需 宽度 ， 结 果 就 与 使 用 
column-count 一 样 。 如 果 只 有 一 个 值 ， 另 一 个 值 就 设置 为 默认 的 auto。 


@ ”column-gap: 控制 列 之 间 的 空隙 。 每 个 列 之 间 会 应 用 相同 的 空隙 。 


column-mle: 在 列 之 间 添 加 一 条 线 , 值 与 border 和 outline 相同 ,也 可 以 使 用 column-mle-width、 
column-rule-style 和 column-rule-color 属性 分 别 设置 3 个 值 。 标 尺 宽度 不 会 影响 列 框 的 宽度 。 


@ column-span: 值 为 all 时 ， 人 允许 块 级 元 素 横 跨 所 有 列 ， 也 用 作 列 分 隔 符 。 
® ”break-before、break-after 和 break-inside: 添加 并 控制 列 的 分 隔 符 。break-before 和 break-after 


1 


的 值 是 auto、always、 avoid、 left、 right、 page、 column、 avoid-page 和 avoid-column。 break-inside 
的 值 是 aato、avoid、avoid-page 和 avoid-column。 

column-fill: 如 果 height 大 于 auto， 该 属性 就 控制 内 容 如 何 布置 到 列 中 。 默 认 值 balance 尝试 
使 所 有 的 列 具有 相同 的 高 度 ， 而 auto 每 次 填充 一 列 。 


. 多 列 基础 
下 面 是 使 用 多 列 布局 的 一 些 基本 示例 。 首 先 ，column-width 指定 每 一 列 的 理想 宽度 。 如 果 一 列 


有 足够 的 空间 ， 这 就 是 最 小 列 宽 。 列 数 和 列 宽 都 会 随 着 元 素 的 宽度 而 改变 ， 以 确保 最 后 一 列 的 边界 


与 元 素 的 右边 界 接触 。 列 的 可 用 宽度 是 元 素 的 宽度 减 去 column-gap 宽度 。 
例如 ， 给 宽度 为 42em 的 段落 应 用 column-width:10em。 这 里 可 以 留 给 浏览 器 来 处 理 ， 也 可 以 使 


用 如 下 伪 算 法 计算 列 数 : 

max(l, floor((available-width + column-gap) / (column-width + column-gap))) 

对 于 默认 的 column-gap: em, 值 为 max(1, floor((42em + lem) / (10em + lem))), 计算 结果 为 max(1， 
floor(3.90909))， 有 3 列 。 接 着 可 以 使 用 如 下 伪 算 法 确定 列 宽 : 

((available-width + column-gap) / number-of-columns) -column-gap 

在 这 个 例子 中 , 结果 是 ((42em + lem) /3) -lem, 得 到 3 个 宽 13.333em 的 列 , 它们 填 满 元 素 的 宽 
度 。 对 宽度 为 42em 的 段落 应 用 column-width:10em 的 前 后 效果 如 图 11-24 所 示 。 

column-width 和 column-gap 不 允许 使 用 百分数 。 如 果 不 希 望 给 column-width 使 用 长 度 单位 ， 
可 以 使 用 column-count。 这 等 价 于 百分数 ， 因 为 column-count 给 出 了 固定 数目 的 列 ， 列 宽 随 着 元 素 
的 宽度 而 改变 。 如 图 11-25 所 示 ， 当 元 素 的 宽度 只 有 20em， 不 足以 容纳 两 个 10em 宽 的 列 和 一 个 列 
之 间 的 空隙 时 ， 比 较 column-width:10em 和 column-count:3。 调 整 column-width 时 ，column-count 会 
维护 列 框 数 。 


323 


HTML5+CSS3 网 页 设计 己 倒 教程 


Gondo was one of the first monkeys to travel Gondo was one 13th, 1958in Unfortunately 
im space. As par of the NASA space ofthe fint theUS. atechnical 
program, Gondo, also known as “Od Reliable”, monkeysto 。 Japitcr AM-13 =malfunction 
was launched from Cape Canaveral on tavelinto rocket, The prevented the 
December 13th- 1958 in the US. Jopiler AM- space. As part «rocket would 。 capsules 
13 rocket. The rocket would travel over ofthe NASA tnnel over Parchute from 
2400km and reach a height of SOOkm (310 Space 2.400km and 。 opcning and, 
miles) before retuming to Earth and janding in progrm, reachabeight despite ashort 
the South Atiantic. Unforunately atechnical Gordo,also of S00km (10 search, neither 
malfunction prevented the capsulcs parachute inown as “Old miles) before his body nor 
rom opening and, despite a short search, Riablcr,was retuming to the vescl 
ncither his body nor he vesscl were ever haunched from Earhand owereever 
meeered Cape landing in the recovered. 

Canaveral on South 

Canaveral on Decsmber iath。 South Adantic Unfortutely = 


应 用 pfcolumn-width: 10em:} 


width: 20em; column-width: 10em; width: 20em; column-count: 3; 
图 11-24 应 用 column-width:10em 的 前 后 效果 11-25 ”比较 column-width:10em 和 column-count:3 


快捷 属性 columns 可 以 设置 列 宽 和 /或 列 数 。 只 给 定 一 个 值 时 ， 另 一 个 值 是 默认 的 auto。 给 定 两 
个 值 时 ， 如 果 元 素 的 宽度 小 于 所 需 宽度 ， 结 果 就 与 使 用 column-width 一 样 ， 如 果 元 素 的 宽度 大 于 所 
需 宽度 ， 结 果 就 与 使 用 column-count 一 样 。 另 外 两 个 重要 的 属性 是 column-gap 和 column-mle， 它 们 
允许 指定 列 之 间 的 空 阶 ， 以 及 空隙 中 间 的 标尺 。column-gap 占用 空间 ， 但 column-rule 不 占用 空间 ， 


将 它们 应 用 于 所 有 的 列 ， 如 图 11-26 所 示 。 


(Gordo was one of the first the U.S. Jupiter AM-13 
monkeys to travel into rocket The rocket would 
space. As part of the travel over 2.400km and 
NASA space program, reach a height of SOOkm 
(Gordo, also known as "Old (G10 miles) before 
Reliable”, was launched retuming to Earth and 
from Cape Canaveral on landing in the South 
December 13th, 1958 in Atlantic, Unfortunately a 


technical malfunction 
Pprevented the capsule's 
Parachute from opening 
and, despite a short search, 
neither his body nor the 
Vessel were ever recovered. 


colunn-width: 10em; colunn-gap: 4em; colum-rule: 2px solid #bbb; 
图 11-26 ”比较 column-width、column-gap 和 column-mle 


2. 支持 多 列 布局 的 浏览 器 


表 11-10 列 出 了 支持 多 列 布局 的 浏览 器 。 
表 11-10 支持 多 列 布局 的 浏览 器 


对 于 不 支持 这 些 属性 的 浏览 器 ， 元 素 的 内 容 会 正常 显示 在 一 列 中 。 这 样 该 列 会 非常 长 ， 但 内 容 
仍 是 可 读 且 可 访问 的 ， 所 以 即使 没有 获得 更 广泛 浏览 器 的 支持 ， 多 列 布局 也 是 有 用 的 。 如 果 给 每 一 
列 中 的 内 容 添加 了 包装 器 ， 例 如 把 三 段 放 在 三 列 中 ， 就 很 容易 通过 添加 Modernizr 


的 .csscolumns/.no-csscolumns 来 退出 样式 。 
3. 多 列 布局 实例 


例 11-3: 本 例 中 的 标记 很 简单 ， 其 中 提供 了 一 个 类 型 为 fxed-width 的 <div> 元 素 ， 以 及 类 型 为 
percentage-width 的 另 一 个 <div> 元 素 。 二 者 都 包含 一 或 两 个 无 意义 的 文本 段落 。 


<div class="fixed-width"> 

<p>Proident accusamus readymade, exercitation wolf ullamco quinoa 
chambray. Tattooed est gluten-free, tumblr ethical sartorial pickled. 
<div> 

<div class="percentage-width"> 
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<p>Proident accusamus readymade, exercitation wolfullamco quinoa 
flexitarian chambray. Tattooed est gluten-free. tumblr ethical sartorial 
pickled ... keffiyeh nesciunt american apparel.</p> 

<p>Proident accusamns readymade, exercitation wolf ullamco quinoa 

flexitarian chambray. Tattooed est gluten-free, tumblr ethical 

sartorial pickled... 

5 

<div> 


在 CSS 中 分 别 使 用 这 两 种 技术 进行 列 的 设置 。.fixed-width 类 将 元 素 的 宽度 设置 为 500 像素 。 
一 共 定义 了 三 列 ， 彼 此 间 有 15 像素 的 间隔 。.percentage-width 类 使 用 column-width 属性 创建 了 宽 
度 为 100 像素 的 列 ， 具 体 数 量 有 到 填 满 <div> 元 素 的 100% 宽 度 为 止 。 
注意 ， 这 里 使 用 了 -webkit- 和 -moz- 浏 览 器 前 级 ， 因 为 Firefox 与 Chrome/Safari 需要 这 些 带 有 前 
缀 的 版 本 。 图 11-27 展示 了 Firefox 中 的 布局 。 
fixed-width { 
width:500px; 
height200px; 


图 11-27 多 列 布局 实例 在 Firefox 中 的 效果 
11.5.4 ”CSS3 区 域 模块 
大 多 数 桌 面 发 布 (DTP) 程 序 都 允许 把 一 系列 文本 框 链接 起 来 ， 把 它们 用 作 其 中 内 容 的 盒子 。 如 
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果 在 第 一 个 盒子 中 显示 的 内 容 太 多 ， 内 容 I 如 图 11-28 所 示 。 


Can ember 
13th, 1958 in the US. Jupiter 
AN-13 rocket. The rocket 
Would travel over2400km 


图 11-28 在 桌面 发 布 程序 中 ， 两 个 文本 框 用 一 条 连接 线 链接 起 来 ， 文 本 从 一 个 文本 框 流动 到 下 一 个 文本 框 


指定 的 流 。 接 着 这 个 元 素 的 内 容 会 流动 到 一 组 区 域 中 ， 这 些 区 域 按 列 出 的 顺序 ， 定 义 为 flow-from 
属性 的 同名 选择 器 。 
article { 
flow-into: article-chain; 
} 
(* IDs of regions in flow order either existing elements or pseudo-elements to be created #/ 
#ede, #partl, #part2, part3 { 
flow-from: article-chain; 
} 
/* styles for positioning these elements */ 


CSS 区 域 仅仅 定义 了 指定 流 的 内 容 如 何在 区 域 链 中 流动 。 接 着 区 域 就 可 以 使 用 其 他 布局 模块 定 
位 ， 包 括 作为 多 列 布局 、 弹 性 盒子 布局 或 网 格 布局 的 一 部 分 。 区 域 可 以 是 空 元 素 的 框架 ， 例 如 网 格 
布局 的 子 元 素 , ::before 和 ::after 等 伪 元 素 或 其 他 可 以 设置 样式 的 元 素 都 可 以 成 为 区 域 。 非 官方 的 CSS 
Pagination Templates Module Level 3 规范 提出 了 一 种 方式 ， 给 基于 页 面 的 布局 定义 DTP 样式 的 “ 主 
模板 ”， 虽 然 使 用 @slot 规则 也 可 以 定义 区 域 ， 但 不 需要 空 元 素 的 框架 。 

使 用 如 下 属性 可 以 控制 内 容 在 区 域 中 的 显示 。 

® ”break-before、break-after 和 break-inside: 在 区 域 链 中 设置 或 避免 区 域 之 间 的 分 隔 , 参见 CSS 

Fragmentation Module Level 3 中 的 定义 。 

e@ ”region-overflow: 和 overflow 属性 一 起 使 用 ， 控 制 如 何 处 理 最 后 一 个 区 域 中 溢出 的 内 容 。 

e @region 规则 : 将 框 模型 、 排 版 和 颜色 样式 应 用 于 特定 区 域 中 的 内 容 。 

伪 元 素 ::before 和 ::after 也 可 以 用 于 每 个 区 域 ， 每 个 区 域 都 会 创建 新 的 块 格式 化 上 下 文 和 堆栈 上 
下 文 。 


11.5.5 ”CSS3 排除 和 形状 模块 


浮动 功能 的 一 个 有 趣 方面 是 非 浮动 的 块 级 元 素 忽略 浮动 元 素 的 方式 ， 但 这 些 方 框 的 行 框 封装 了 
它们 。 这 个 规范 (CSS Exclusions and Shapes Module Level 3) 的 CSS Exclusions 部 分 扩展 了 将 内 联 内 容 
应 用 于 任何 元 素 (使 用 任意 定位 模式 ) 的 功能 。 文 本 可 以 流向 某 形状 (CSS Shapes 部 分 ) 的 内 部 和 周围 ， 
并 在 单个 元 素 的 内 部 和 外 部 使 用 不 同 的 形状 。 这 使 文本 流向 图 像 的 周围 或 内 部 等 复杂 技术 更 容易 实 
现 ， 如 图 11-29 所 示 。 

使 用 wrap-flow 属性 可 以 控制 块 级 元 素 对 内 联 内 容 的 影响 ， 可 取 值 是 auto (默认 )、both、start、 
end、minimum、maximum 和 clear， 它 们 提供 不 同 的 封装 效果 。 值 不 是 auto 的 元 素 会 影响 同一 个 包 
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含 块 中 的 内 联 内 容 ， 并 建立 新 的 块 格式 化 上 下 文 。 使 用 wrap-margin、wrap-padding、wrap-through 
和 快捷 属性 wrap( 包 括 前 面 3 个 属性 ) 可 以 控制 排除 的 内 容 。 


mene to 


图 11-29 左边 的 文本 流向 图 像 的 周围， 右边 的 文本 显示 在 半圆 的 形状 中 


CSS Shapes 使 用 shape-outside 和 shape-inside 声明 。 内 部 形状 可 以 应 用 于 任何 块 级 元 素 ， 而 外 
部 形状 只 能 应 用 于 排除 元 素 或 浮动 元 素 。 形 状 可 以 用 CSS 中 基本 的 SVG 语法 (ectangle0、circle0、 
ellipse0 和 polygon0) 定 义 ， 在 <svg> 块 中 通过 引用 SVG 形状 来 定义 ， 通 过 带 透明 度 的 图 像 来 定义 ， 
或 者 使 用 outside-shape 给 shape-inside 和 shape-outside 定义 相同 的 形状 。 

合并 排除 元 素 和 形状 ， 就 可 以 生成 各 种 各 样 的 布局 。 


11.5.6 CSS3 分 页 媒体 模块 


这 个 规范 (CSS Paged Media Module Level 3) 详 细 描述 了 页 面 媒体 格式 化 模型 ， 在 打印 网 页 时 ， 
根据 页 框 来 使 用 它 。 它 可 以 使 用 @page 规则 (和 封装 页 面 的 区 域 的 相关 规则 ， 例 如 @top-center 和 
@bottom-right-comeD、:left、:right 和 :first 伪 类 来 设置 样式 。 这 些 都 可 以 在 @media 规则 中 使 用 。 这 
个 规范 还 定义 了 与 页 面相 关 的 属性 ， 包 括 : 

@ ”page-break-*: 这 些 是 CSS Fragmentation Module 中 break-* 属 性 (由 Multi-Column Layout、CSS 

Regions、CSS Flexbox 等 使 用 ) 的 先驱 ， 它 们 的 工作 方式 是 相同 的 。 

@ size: 指定 页 面 的 尺寸 (常见 的 页 面 尺 寸 , 或 指定 宽度 和 高 度 )。 如 果 需 要 方向 , 就 指定 size: A4 

portrait 或 size: 6in 4in。 

e@ page: 创建 指定 的 @page 规则 ， 接 着 使 用 page 属性 控制 元 素 最 适合 显示 在 哪 种 页 面 中 。 

例如 ， 下 面 的 CSS 代码 指定 了 页 面 尺寸 和 方向 以 及 左右 页 边 距 ; 


@page { 

size: AS portrait: 
3 
* channeling Miiller-Brockmann */ 
@page :left { 

margin: 15mm 10mm 30mm 20mm:; 
} 
@page right { 

margin: 15mm 20mm 30mm 10mm: 
} 


这 些 也 可 以 嵌 套 在 @media 规则 中 ， 例 如 : 


@media print and (width: 210mm) and (height: 297mm) { 
@page { 
M* rules for A4 paper */ 
} 
} 
@media print and (width: 8.5in) and (height: 11in) { 
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@page { 
M* mules for US Letter paper */ 


} 

} 

如 果 页 面 分 隔 符 出 现在 带 行 框 的 元 素 的 中 间 ， 那 么 CSS Fragmentation Module 中 的 orphans 和 
widows 就 有 助 于 控制 排版 的 偏离 线 。 另 外 ，CSS Image Values and Replaced Content Module Level 3 
规范 中 的 两 个 相关 属性 object-fit 和 object-position 控制 着 替代 内 容 ( 例 如 <img>、<video>、<object> 
和 <svg>) 如 何在 其 方 框 中 显示 和 定位 。 

@ ”object-fit: 如 果 蔡 代 内 容 的 尺寸 或 宽 高 比 不 同 ， 那 么 该 属性 可 以 重 置 蔡 代 内 容 在 元 素 方 框 中 


的 大 小 。 例 如 ， 可 以 选择 剪 切 或 在 宽屏 幕 中 显示 宽屏 电影 一 一 非常 适用 于 处 理 各 种 内 容 的 
模板 。 

@ ”object-position: 与 background-position 的 工作 方式 相同 ， 允 许 在 元 素 方 框 的 帧 中 偏 移 元 素 的 
内 容 。 


这 些 属性 的 浏览 器 支持 情况 有 很 大 区 别 。 例如, page-break-before 得 到 了 广泛 的 支持 , 但 Firefox 
不 支持 page-break-inside，IE8+ 和 Opera 9.2+ 支 持 widows 和 orphans， 只 有 Opera 12 定制 版 本 支持 
object-fit 和 object-position 。 


11.5.7 ”用 于 分 页 媒体 模块 的 CSS 生成 内 容 


这 个 规范 (CSS Generated Content for Paged Media Module) 为 生成 的 内 容 提供 样式 , 例如 自动 的 页 
眉 、 脚 注 和 跨 引用 。 它 还 包含 overflow-style 属性 的 4 个 新 值 : paged-x、paged-y、paged-x-controls 
和 paged-y-controls。 它 们 会 提供 基于 页 面 的 界面 ， 有 或 没有 相关 的 导航 控件 。 这 些 样式 适合 与 CSS 
Paged Media and Multi-Column Layout 规范 一 起 使 用 。 

如 果 和 希望 显示 章 号 和 基于 章 名 的 自动 页 眉 ， 就 可 以 将 章 的 <h1> 内 容 赋予 一 个 指定 的 字符 串 ， 把 
它 与 一 个 计数 器 关联 起 来 。 

hf 

| 

在 上 面 这 个 示例 中 ， 给 字符 串 “chapter-title” 添 加 了 <hl> 的 content-element 内 容 (元 素 的 内 容 ， 
不 包括 :before 或 :after 内 容 )。 每 次 遇 到 <h1> 时 ， 还 会 递增 计数 器 chapter。 使 用 CSS Paged Media 
Module 中 的 样式 , 例如 @page 规则 ,可 以 获得 用 string0 设 置 的 指定 值 ,使 用 counter0 可 以 获得 当前 
计数 ， 使 用 content 属性 可 以 显示 它们 ， 使 用 :left 和 :right 伪 类 可 以 把 它们 定位 到 左右 页 面 中 。 继 续 
上 述 代码 : 

tite { 

string-set: book-title contents: 
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@page right { 
@top-center { 
content: "Chapter " counter(chapter) ": " string(chapter-title): 
} 
} 
要 给 电子 书 使 用 页 面 用 户 界面 ， 可 以 使 用 如 下 CSS: 
@media paged { 
html { 
height: 1009%; 
‘overflow: paged-x-controls; 
上 
;1 
使 用 height:100% 限 制 视 口 的 高 度 ， 额 外 的 内 容 会 溢出 到 右边 ， 通 过 默认 的 浏览 器 页 面 导航 小 工 
具 可 以 访问 它们 。 该 规范 通过 @navigation、 基 于 页 面 和 行 的 伪 元 素来 包含 基于 页 面 的 导航 功能 ， 以 
及 电子 书 样式 的 翻 页 切换 效果 。 


11.5.8 ”弹性 盒子 布局 模块 


这 个 规范 (Flexible Box Layout Module) 开 始 于 Firefox 用 户 界 面 的 建立 ， 通 过 使 用 布局 属性 以 及 
在 水 平 或 垂直 方向 上 排列 的 盒子 ， 定 义 “ 为 界面 设计 进行 优化 的 CSS 盒子 模型 ”， 并 深度 控制 盒子 
如 何 对 齐 ， 以 及 如 何 相 对 于 可 用 空间 进行 伸缩 。 

要 使 用 弹性 盒子 ,首先 要 使 用 display: flex 把 元 素 变 成 弹性 容器 , 接着 使 用 弹性 布局 建立 新 的 弹 
性 格式 化 上 下 文 ， 构 成 包含 块 ， 禁 止 浮动 元 素 折 受 、 重 受 外 边 距 。 弹 性 容器 的 子 元 素 就 变 成 了 弹性 
项 。 弹 性 容器 不 能 使 用 多 列 布局 ，float、clear 和 vertical-align 属性 不 影响 弹性 项 。 图 11-30 为 水 平 
和 垂直 书写 的 语言 显示 了 单行 弹性 框 ， 演 示 了 对 于 英语 和 传统 日 语 ， 如 何 根据 不 同 的 writing-mode 
值 改变 主轴 和 交叉 轴 。 


交 双 方向 区 环 方 向 
花环 方向 
克 起 应 
WR 


英语 文本 
(从 左 到 右 ， 从 上 到 下 ) 二 
wmting-mode honzontal-tb- 


主轴 方向 
的 终 ， 


主轴 方向 
应 点 的 起 点 欧 吕 的 去 要 尼 矿 


“> 主轴 弹性 容器 


图 11-30 带 弹性 项 的 单行 弹性 容器 


下 面 将 flex 预 置 值 应 用 于 图 11-31 所 示 的 简单 导航 栏 ， 以 比较 相对 弹性 和 绝对 弹性 的 区 别 。 这 
里 没有 显示 flex: initial， 因 为 有 额外 空间 时 ， 它 与 flex: none 相同 。 


<style> 
av { 
display: flex: /* Establish a flex container +/ 


329 


HTML5+CSS3 网 页 设计 和 己 便 教程 


(* First image: Flexbox with no flex */ 
Tavli{ 

flex: none: /* equivalent to flex: 0 0 auto: */ 
} 
/* Second image: Relative flex */ 
Tavli{ 

flex: auto; /* equivalent to flex: 1 1 auto; */ 
} 
/* Third image: Absolute flex */ 
Tavli{ 

flex: 1; /* equivalent to flex: 1 1 Opx; */ 
} 
/* Fourth image: Differing flex values */ 
Tavli{ 

flex: 1; 
} 
lav linth-child(2) { 

flex: 2; /* equivalent to flex: 2 1 Opx; 机 
} 
/* Increase click target area */ 
ava{ 

display: block: 

width: 100%; 

height: 100%; 
} 
</style> 


<ul class="nav"> 
<li><a href="/">Home</a></li> 
<li><a href="/articles">Space Monkey Articles</a></li> 
<li><a href="/dashboard">Log in</a></li></ul> 
没有 弹性 的 剖 性 在 于 ( 岗 如 flex none) 
-1 (网 容 的 尺寸，berewidth: auto) 
相对 弹性 (例如 flex: auto) 


Homa Space Monkey Articles Login 可 用 空间 _ 


Home | Space Morkay rides Log in | 到 
Home Space Monkey Login 绝对 弹性 (例如 Be 1 
Articies 空间 仅 根据 弹性 项 来 分 


不 同 的 弹性 值 
Hr ee a 时 性 项 久 代用 客室 上 的 一 个 比 


容器 的 宽度 


图 11-31 比较 相对 弹性 和 绝对 弹性 


如 果 没有 足够 的 空间 ， 弹 性 值 dflex-shrink) 会 控制 每 个 弹性 项 如 何 缩小 。 使 用 没有 弹性 的 弹性 盒 
子 会 把 块 级 元 素 堆放 在 两 边 ， 就 好 像 它们 是 inline-block。 

弹性 盒子 的 最 佳 功能 是 深度 控制 弹性 项 的 对 齐 方式 和 排序 方式 。 首 先 ,没有 弹性 的 弹性 项 ( 即 带 
flex-grow:0 的 弹性 项 ) 的 容器 如 果 有 额外 的 空间 , 就 可 以 使 用 自动 外 边 距 对 齐 该 弹性 项 一 一 任何 额外 
的 空间 都 会 在 值 为 auto 的 轴 方向 上 平均 分 布 到 外 边 距 上 。 注意 , 这 会 禁止 属性 justify-content 发 挥 作 
用 ， 因 为 自动 外 边 距 会 在 计算 弹性 后 、 在 弹性 盒子 对 齐 之 前 吸纳 所 有 空闲 的 空间 。 

下 面 使 用 图 11-31 中 的 导航 按钮 (flex:none) 演 示 自 动 外 边 距 的 对 齐 ， 如 图 11-32 所 示 。 
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Home Space Monkey Aricles *— ogin 1Hastchid{ 

margin-ieft au 
WE Logn inm-cmion) 

margir 0auto} 

Home -Space Monkey Arices -Log mr 11{ 
argirc 0 auvto} 

-Home -~ Space Monkey Aricles Log in Hirst-chid{ 
margin 0 auto} 


容 各 并 度 


图 11-32 在 弹性 项 的 主轴 方向 上 ， 额外 的 空间 会 平均 分 布 到 自动 外 边 中 之 间 


justify-content 属性 允许 快速 应 用 几 种 常见 的 对 齐 方式 之 一 。 图 11-33 显示 了 将 该 属性 的 每 个 可 
能 性 值 应 用 于 同一 个 导航 按钮 的 效果 。 

除了 在 主轴 方向 上 对 齐 内 容 之 外 ， 弹 性 盒子 还 提供 了 在 交叉 轴 方向 上 对 齐 内 容 的 强大 工具 。 
align-items 和 align-self 属性 使 用 相同 的 值 ， 分 别 用 于 对 齐 所 有 弹性 项 (应 用 到 弹性 容器 上 ) 和 各 个 弹 
性 项 。 下 面 比较 align-items 的 可 能 取 值 ， 如 图 11-34 所 示 。 

align-content 可 在 交叉 轴 方 向 上 对 齐 多 行 弹 性 框 的 弹性 行 , 所 以 弹性 盒子 提供 了 细 调 弹性 项 对 齐 
和 分 布 的 功能 。 

在 将 弹性 盒子 用 于 页 面 布局 时 要 小 心 。 使 用 order 属性 可 以 对 一 行 中 的 弹性 项 重新 排序 ， 但 复 
杂 的 页 面 布局 需要 额外 的 包装 元 素 ， 布 局 的 重新 安排 常常 需要 修改 HIML。 弹 性 盒子 的 长 处 是 可 以 
控制 界面 或 页 面 中 某 部 分 的 对 齐 和 分 布 方式 ， 但 它 并 不 适合 整个 页 面 布 局 。CSS Grid Layout 对 此 做 
了 完美 补充 ，CSS Grid Layout 专门 用 于 整个 页 面 布局 ， 但 仍 需要 处 理 基于 弹性 盒子 的 页 面 布局 。 


Rocket anch 


Mome Space Morkmy Ancia Log mn at 


iome Spaoe Merey Mricies Log ri ul 
atty cortet her ene 
Home Spoce oroy nees toom al 
ay smart om 
一 | Space Mamiey wm i at 
eo 
tom Se eon ul 
Se ~ 人 gn ems: center ‘hgn ftoms: baseme 
图 11-33 给 弹性 容器 应 用 justify-content 属性 图 11-34 ”对 弹性 容器 应 用 align-items 属性 


11.5.9 ”CSS 网 格 布局 模块 


网 格 布 局 (CSS Grid Layout Module) 是 “一 种 真正 的 布局 ”方法 ， 基 于 网 格 ， 与 源 顺 序 没有 任何 
联系 ， 用 于 为 不 可 能 使 用 表格 布局 或 其 他 CSS 2.1 布局 模式 的 页 面 建立 布局 。 

网 格 由 水 平和 垂直 的 网 格 线 组 成 ， 其 中 包含 了 网 格 字段 。 要 建立 网 格 ， 可 以 创建 网 格 线 、 网 格 
字段 ， 或 者 创建 两 者 ， 任 何 未 定义 的 但 必需 的 线条 或 字段 会 自动 添加 。 网 格 的 块 级 元 素 、 蔡 代 元 
素 和 inline-block 子 元 素 是 网 格 框 ， 可 以 根据 指定 的 网 格 字段 、 网 格 线 或 网 格 线 标尺 来 定位 。 网 格 
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框 可 以 跨越 多 行 ， 将 内 容 对 齐 到 网 格 线 时 ， 重 莅 网 格 框 ， 甚 至 将 它们 定位 到 同一 个 位 置 ， 控 制 它 
们 的 堆 琶 次 序 。 这 些 术 语 如 图 11-35 所 示 。 


网 格 线 网 格 线 网 格 线 网 格 布局 的 概念 
上 站 网 格 线 网 格 元 素 包 含 垂直 和 水 平 的 网 
:| | i 格 线 ， 其 中 包含 风格 字段 .指定 
| | 和 a 格 字段 网 格 线 或 网 格 字段 ， 或 者 两 者 都 
me 日 上 bs PHA 指定 , 就 可 以 创建 网 格 布局 (网 格 
要 直 线 和 网 格 字段 )- 
要 网 格 线 
网 格 线 有 默认 编号 ， 也 可 以 用 一 
Pp 网 格 线 ,指定 的 任务 个 或 多 个 任务 来 命名 。 命 名 的 网 
1 "first 2 一 扶 V 编 3 一 3 4 "Jast"~ 一 格 字段 可 以 跨 多 行 。 使 用 字段 名 
+ 和 了 和 -op、-right、-botiom、-left, 
:| “tile-top” 。 也 会 给 每 条 边 上 的 网 格 线 建立 
路 列 的 网 格 字段 "itle” | 网 格 字段 固有 的 任务 (这 里 显示 在 水 平 网 
: 格 线 上 ) 
+ Tr i Tuerton 
固有 的 任务 
网 格 杠 可 以 根据 网 格 线 或 命名 
的 网 格 字段 在 网 格 中 定位 和 对 
齐 。 它们 可 以 相互 重 彼 ， 填 充 黑 
认 分 配给 它们 的 字段 


11-35 ”网 格 布局 的 概念 


网 格 布局 非常 灵活 、 强 大 一 一 适合 创建 整个 页 面 布局 ， 再 用 媒体 查询 重新 安排 。 这 种 布局 规范 
合并 了 以 前 几 和 布局 规范 的 优点 ， 希 望 能 得 到 广泛 应 用 ， 并 最 终 看 到 基于 GUI 的 Web 设计 工具 。 


本 章 小 结 


本 章 首先 介绍 了 盒子 模型 的 基础 知识 和 各 种 盒子 , 然后 介绍 了 position 属性 的 基于 CSS 2.1 的 布 
局 选项 、 浮 动 元 素 以 及 display: inline、display: inline-block 和 display: table 布局 。 还 介绍 了 媒体 查询 ， 
如 何 使 用 它们 来 获得 响应 式 Web 设计 ， 以 及 如 何 处 理 高 分 辨 率 的 显示 器 。 最 后 介绍 了 9 个 CSS3 布 
局 模块 ， 大 多 数 模块 可 以 在 一 个 或 多 个 浏览 器 中 实现 。 


思考 和 练习 


. 网 页 的 正常 流向 是 如 何 呈 现 的 ? 

. 试 述 float 和 clear 属性 在 网 页 布局 中 的 作用 。 

. 在 CSS3 中 ， 使 用 哪个 属性 针对 绝对 定位 元 素 进行 剪裁 ? 
. 试 述 CSS 盒子 模型 的 基本 结构 。 

. 默认 情况 下 ， 如 何 计算 CSS 盒子 模型 的 幅面 大 小 ? 

. 试 述 网 页 布局 的 方法 和 流程 。 

. 常用 的 网 页 布局 版 式 有 哪些 ? 分 别 适用 于 什么 情况 ? 

. 试 述 图 11-36 所 示 网 页 中 可 能 使 用 的 CSS 样式 。 


omwmhwmPb 一 
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9. 测试 CSS 定位 技巧 。 使 用 不 同 的 方式 创建 一 个 页 面 ， 要 求 在 页 面 上 呈现 到 文章 中 不 同 小 节 
的 链接 。 每 个 小 节 必 须 在 不 同 的 块 中 显示 ， 并 且 每 个 块 必须 在 对 角 线 上 自 左 上 角 向 右 下 角 方 向 绝对 


定位 。 中 间 的 盒子 应 在 顶部 显示 ， 如 图 11-37 所 示 。 


图 11-36 ”使 用 Css 样式 的 网 页 


Chapter 9 - More cascading Style Sheets 


Piropertes 


图 11-37 测试 CSs 定位 技巧 
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变形 、 变 换 和 动画 


回顾 网 络 发 展 的 早期 阶段 ， Flash 和 JavaScript 是 创建 那些 无 法 单独 用 HIML 和 CSS 获得 的 效 
果 的 两 种 流行 方法 ， 例 如 按钮 翻转 、 流 视频 的 创建 以 及 跟随 在 光标 周边 的 图 片 。 但 是 随 着 HTML5 
中 <video>、<audio> 以 及 <canvas> 等 元 素 的 出 现 ，CSS3 将 创建 这 些 效果 的 能 力 内 置 于 CSS 变形 、 变 
换 和 动画 规范 中 。 利 用 CSS3 规范 就 可 以 轻易 地 在 浏览 器 中 添加 类 似 Flash 的 动画 和 用 户 界面 效果 。 
此 外 ， 由 于 硬件 加 速 ， 尤 其 是 在 移动 设备 上 的 引入 ，CSS3 是 添加 以 前 不 可 能 实现 的 效果 的 可 行 选 
择 。 

对 于 高 级 动画 ， 仍 然 可 以 选择 JavaScript、canvas、 带 有 SMIL 的 SVG 甚至 Flash， 但 是 对 于 一 
些 基 本 的 动画 而 言 ， 元 素 的 运动 可 以 由 :hover 伪 类 实现 ， 向 CSS3 中 添加 运动 可 以 让 这 些 流行 的 特 
性 比 在 JavaScript 中 更 易 让 人 理解 。 本 章 将 介绍 利用 CSS3 在 网 页 中 添加 变形 、 变 换 和 动画 的 工具 。 


本 章 的 学 习 目标 : 

e@ 掌握 CSS 的 2D 和 3D 变形 工具 

e@ 了解 CSS 的 2D 和 3D 变换 概念 

e@ 使 用 CSS 的 2D 和 3D 动画 制作 关键 帧 动画 


CSS 的 2D 和 3D 变形 


变形 就 是 在 空间 中 对 元 素 进行 平移 、 旋 转 、 缩 放 和 斜 切 等 基本 操作 ， 如 图 12-1 所 示 。 产 生变 形 
的 元 素 不 会 影响 其 他 元 素 ， 只 会 与 其 他 元 素 发 生 交 乔 ， 例 如 position:absolute， 但 是 仍然 会 占据 原来 
默认 的 位 置 。 这 对 于 改变 元 素 的 宽度 、 高 度 、 边 缘 等 十 分 有 利 ， 因 为 这 样 布局 就 不 会 因为 变形 而 产 
生 改变 。 

例如 2D 变换 : 平移 (24 像素 ，24 像素 )、 旋 转 (-2059)、 缩 放 (.75) 和 和 斜 切 (-18?)。 每 个 盒子 的 标签 
也 随 之 发 生 相同 或 相反 的 变形 。 代 码 如 下 : 

‘translate {transform: translate(-24px, -24px):} 

.Iotate {transform: rotate(-205deg):} 

scale {transform: scale(.75):} 

skew {transform: skewX(-18deg):} 


第 和 2 章 变形 、 变 换 和 动画 


translat 
nomal scale| 


图 12-1 2D 变换 的 例子 


12.1.1 ”变形 属性 和 变形 函数 


下 面 是 有 关 变 形 属性 和 变形 函数 的 简要 说 明 ， 首 先 简要 介绍 CSS 的 值 和 单位 。 
表 12-1 列 出 了 CSS 的 值 和 单位 的 缩写 形式 。 


表 12-1 CSS 的 值 和 单位 


单位 说 明 
整数 可 在 前 面 加 上 可 选 的 + 或 -符号 的 数值 ， 例 如 -1 
数字 包括 小 数 在 内 的 数值 ， 前 面 可 加 上 可 选 的 + 或 -符号 ， 例 如 95 
百分数 后 面 紧 跟 % 的 数值 ， 例 如 33.3% 
长 度 单位 (如 果 长 度 是 0， 则 是 可 选 的 )， 例 如 24px。 长 度 单位 包括 如 下 。 
长 度 相对 单位 : em、ex、ch、rem、vw、 由 、vm 
绝对 单位 ，cm、mm、in、px、pt、 Pp 
角度 后 面 紧 跟 角度 单位 的 数值 ， 例 如 18deg。 角 度 单位 包括 deg、grad、rad 和 tum 
时 间 后 面 紧 跟 时 间 单 位 的 数值 ， 例 如 400ms。 时 间 单 位 包括 ms 和 s 
下 面 介绍 一 些 常用 的 变形 属性 和 变形 函数 。 
(1) transform 属性 


该 属性 由 使 用 空格 分 隔 的 应 用 于 元 素 的 变形 函数 构成 ， 例 如 transform: translate(3em,-24px) 

scale(.8)。 变 形 函数 可 以 是 负 值 ， 默 认为 非 负 值 。 

变形 函数 包括 以 下 6 个 。 

e@ ”函数 translate0: 将 元 素 从 其 原点 开始 沿 着 XX 轴 、Y 轴 和 /或 Z 轴 进 行 移动 ， 该 函数 也 可 以 被 
写 为 translate(tX)、translate(tX, {Y) 以 及 translate3D(tX, tY, tZ)( 除 了 世 之 外 ， 其 他 参数 都 采用 
长 度 的 百分比 单位 )。 此 外 ， 还 有 2D 平移 函数 translateX(tX)、translateY(tY) 以 及 3D 平移 函 
数 translateZ(tZ)。 

e@ 函数 rotate0: 在 2D 空间 中 国 绕 元 素 的 变形 原点 对 其 进行 旋转 ，0° 指 向 元 素 上 方 ， 正 旋转 方 
向 为 顺 时 针 ( 角 度 )。 此 外 ， 还 有 rotateX(rX)、rotateY(rY) 和 rotateZ(12) 三 个 变形 函数 使 得 元 
素 围绕 单独 的 轴 进 行 旋转 。 最 后 ， 还 有 一 个 函数 rotate3D(vVX, vY, vZ, angle)， 它 使 得 元 素 在 
3D 空间 中 围绕 vVX、vY 和 vZ( 无 单位 数值 ) 决 定 的 方向 矢量 旋转 由 angle 参数 指定 的 角度 。 

@ 函数 scale0: 改变 元 素 的 尺寸 ， 默 认 是 scale(1)。 该 函数 可 以 写成 scale(s)、scale(sX, sY) 和 
scale3D(sX, sY, sZ)( 无 单位 数值 )。 此 外 ， 还 有 2D 变形 函数 scaleX(sX) 和 scaleY(sY) 以 及 3D 
变形 函数 scaleZ(sZ)。 

e@ 函数 skew0: 将 元 素 沿 着 X 轴 (如 果 指 定 两 个 数值 的 话 ， 就 会 同时 沿 着 Y 轴 ) 进 行 斜 切 。 该 
函数 可 被 写作 skew(tX) 和 skew(tX, tfY)。 此 外 ， 还 有 两 个 函数 skewXO 和 skewY0。 

@ ”函数 matrix0: 该 变形 函数 接收 一 个 变形 矩阵 作为 参数 。matrix0 的 参数 形式 为 matrix(a, b, c， 
de, (无 单位 数值 ), matrix3DO 则 接收 一 个 4X4 的 变形 矩阵 作为 参数 .2D 变形 函数 matrix0) 
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则 被 映射 成 matrix3D(a, b, 0, 0, c, d 0, 0, 0, 0, 1, 0, e, £0, 1)( 无 单位 数值 )， 它 可 以 一 次 性 进行 
所 有 的 2D 和 3D 变形 。 
e@ ”函数 perspective0: 该 函数 为 3D 变换 提供 透视 图 并 控制 。 这 个 值 必须 大 于 0，2000px 左右 
表示 正常 ，1000px 会 产生 一 定 的 失真 ，500px 则 会 造成 严重 失真 。perspective0 变 形 函数 与 
透视 属性 的 不 同 之 处 在 于 变形 函数 只 会 影响 元 素 本 身 ， 而 透视 属性 却 会 影响 元 素 的 子 元 素 。 
注意 ，perspective0 只 会 影响 变形 规则 中 位 于 它 后 面 的 变形 函数 。 
(2) perspective 属性 
该 属性 与 透视 变形 函数 产生 的 效果 相同 ， 它 会 让 产生 3D 变形 的 元 素 具有 一 种 深度 感 。 该 属性 
会 影响 到 元 素 的 子 元 素 ， 同 时 会 将 它们 保持 在 相同 的 3D 空间 中 。 

(3) perspective-origin 属性 

与 使 用 transform-origin 设置 变形 原点 一 样 ， 该 属性 会 设置 透视 原点 ， 它 与 transform-origin 接收 
相同 的 值 : 关键 字 、 长 度 和 百分比 。 默 认 情况 下 是 perspective-origin: 50% 50%。 它 可 以 影响 所 应 用 
元 素 的 子 元 素 ， 默 认 是 none。 

(4) transform-origin 属性 

在 X 轴 、Y 轴 和 /或 Z 轴 上 设置 进行 变形 所 围绕 的 点 ， 可 以 被 写作 transform-origin:X、 
transform-origin: XY 以 及 transform-origin: XYZ。 可 以 针对 和 X 轴 使 用 关键 字 left、center 和 right， 针 
对 立轴 使 用 关键 字 top、center 和 bottom。 对 于 义 轴 和 YY 轴 也 可 以 使 用 长 度 和 百分比 ， 但 是 对 于 Z 
轴 只 能 使 用 长 度 。 最 后 ， 对 于 2D 空间 中 的 transform-origin， 可 以 列 出 3 或 4 个 值 来 表示 偏 移 ， 偏 
移 的 形式 是 两 对 关键 字 后 紧 接 一 个 百分比 值 或 长 度 值 。 如 果 只 列 出 3 个 值 ， 那 么 缺少 的 百分比 值 或 
长 度 值 被 当 作 0 处 理 。 默 认 情 况 下 ，transform-origin 是 元 素 的 中 心 。 也 就 是 说 ， 对 于 2D 变形 是 
transform-origin: 50% 50%， 对 于 3D 变形 是 transform-origin: 50% 50% 0。 

(5) transform-style 属性 

对 于 3D 变形 而 言 , 该 属性 可 以 为 flat( 默 认 情 况 下 ) 或 preserve-3d, flat 会 将 进行 变形 的 元 素 的 所 
有 子 元 素 保持 在 2D 空间 中 一 一 同一 平面 中 。preserve-3d 则 会 让 子 元 素 在 3D 空间 中 产生 变形 , 并 通 
过 乙 轴 控制 子 元 素 在 父 元 素 前 后 的 距离 。 

(6) backface-visibility 属性 

对 于 3D 变形 而 言 ， 该 属性 可 以 控制 元 素 的 背面 可 见 还 是 隐藏 。 

在 类 似 scaleYO 这 样 的 单个 函数 中 使 用 大 写 的 X、Y、Z 和 3D 时 ， 只 是 使 它们 更 易于 辨识 。 也 

可 以 使 用 像 scaley0 中 这 样 小 写 形式 的 x、y、z 和 3d。 


注意 : 

在 变形 中 可 以 使 用 多 个 由 空格 分 隔 的 变形 函数 ,但 是 不 能 对 每 个 变形 函数 应 用 其 他 变形 属性 ( 例 
如 transform-origin) 的 不 同 值 ， 而 应 该 将 每 一 组 属性 应 用 于 包装 器 元 素 。 

如 果 正在 使 用 3D 变形 ， 就 需要 将 透视 属性 应 用 于 进行 变形 的 元 素 ， 以 使 它们 呈现 3D 外 观 。 如 
果 要 对 多 个 元 素 进行 变形 ， 并 将 它们 保持 在 同一 个 3D 空间 中 ， 就 需要 将 透视 属性 应 用 于 这 些 元 素 
的 前 驱 元 素 。 


12.1.2 ”元素 的 变形 效果 
变形 属性 是 变形 的 基础 ， 可 以 有 一 个 或 多 个 由 空格 分 隔 的 2D/3D 变形 函数 。 如 果 有 多 个 2D/3D 
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变形 函数 ， 它 们 将 按 顺 序 进行 应 用 。 


em、 


1. 移动 元 素 

(1) 用 transform:translate0 和 transform-translate3d0 平 移 元 素 

transform: translate0 人 允许 沿 着 处 轴 、Y 轴 和 /或 Z 轴 移 动 元 素 及 其 子 元 素 。 它 使 用 长 度 单位 (px、 
rem 等 ) 和 百分比 ， 默 认 值 是 0。 有 如 下 形式 的 移动 变形 函数 

‘transfonm:translateY (tY) «transform: translateZ(tZ) transfomm: tanslate3D(EXtY.t) 

图 12-2 中 的 transform: translate0 示 例 展 示 了 有 具有 一 个 值 和 两 个 值 的 平移 ， 代 码 如 下 : 

div {width: 25%; height: 100px: /* by default translate: transform(0); + 小 

span {display: inline-block; width: 50%; height 50px: transform: translate(-3px,47px):} 

div, span {border-width: 3px: transition: all 1s: /* ease by default + 让 

figure:hover div {transform: translate(28096); /* same as translateX(28096): */} 

figure:hover span {transform: translate(90%%,-3px):} 

注意 ， 我 们 让 里 面 的 盒子 覆盖 外 面 的 盒子 的 边框 ， 这 样 就 可 以 演示 具有 负 值 的 平移 ， 如 图 12-2 


mm | [| 


图 12-2 2D 平移 元 素 效果 
transform: translate3d0 的 最 终结 果 和 2D 平移 非常 相似 ， 如 果 用 到 了 transform-style: preserve-3d， 


那么 它 会 像 2D 平移 一 样 允许 修改 z-index。 但 是 ， 一 旦 增加 透视 属性 ，Z 轴 产 生 的 效果 就 和 2D 缩 
放 变 形 一 样 ， 如 图 12-3 所 示 。 


虽然 是 相同 的 盒子 ， 但 是 里 面 的 盒子 使 用 了 transform: translate3d0， 从 负 值 开 始 (距离 观察 者 较 


远 )， 在 动画 结束 时 平移 为 正 值 (距离 观察 者 较 近 )。 代 码 如 下 : 


示 。 


‘inner-box ftransform: translate3d(-3px.47px.-50px):} /* SOpx behind the div */ 
.outer-box, ,inner-box {transition: all 1s:} 

.containerhover .outer-box {transform: translate3d(2809%,0.0):} /* the same as translate(28096) */ 
.container:hover inner-box {transform: translate3d(90%,-3px.200px):} /* 200px in front of the div */ 


[| 


图 12-3 3D 平移 元 素 效果 


(2) 用 transform: rotate0 和 transform: rotate3d0 旋 转 元 素 
变形 函数 rotate0 接 收 角度 值 (deg、rad、grad 和 tum)， 包 括 负 值 和 大 于 360° 的 值 ， 如 图 12-4 所 
对 于 正 值 而 言 ， 旋 转 方向 是 顺 时 针 ， 例 如 transform: rotate(360deg) 将 顺 时 针 旋 转 一 圈 。 有 以 下 形 


式 的 旋转 变形 函数 : 


transfonm: rotate(angle) transfom: rotateX(rX) transfonm: rotateY(rY) transfomm: rotateZ(17) 
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transform: rotate3D(vX, vY, vZ, angle) 

对 于 悬 停 时 旋转 的 盒子 ， 外 面 的 盒子 用 具有 正 值 ( 顺 时 针 ) 的 transform: rotate0 进 行 旋转 ， 里 面 的 
盒子 用 具有 和 负 值 ( 逆 时 针 ) 的 transform: rotate0 进 行 旋转 。 代 码 如 下 : 

div {width: 100px: height: 100px:} 

Span {display: inline-block: width: 50px; height 50px:} 

div, span {transition: all 1s;} 

figure:hover div {transform: rotate(180deg); 

figure:hover span {transform: rotate(-450deg);} 


全 (昌国 
图 12-4 2D 旋转 元 素 效果 


3D 旋转 允许 元 素 围绕 由 前 3 个 值 指定 的 方向 矢量 进行 旋转 , 旋转 的 角度 由 第 4 个 值 指定 。 方 向 
矢量 的 值 都 是 无 单位 数值 ， 但 是 重要 之 处 在 于 它们 之 间 的 比例 : rotate3d(2,1,0,90deg) 与 rotate3d 
(10,5,0,90deg) 相 同 ，2D 变换 transform: rotate0) 与 用 transform: rotate3d(0,0,1,angle) 围 绕 Z 轴 进 行 旋转 
相同 。 但 是 ， 旋 转角 度 大 于 180? 的 rotate3d0 与 transform: rotate0 的 效果 不 同 。 在 图 12-5 中 ， 对 每 次 
围绕 一 个 轴 旋 转 与 rotate0 和 rotate3d0 进 行 了 比较 。 


i 


hse ed 


| | | 于 ED 


图 12-5 一 系列 3D 旋转 元 素 效果 


下 面 展 示 不 同 3D 旋转 的 一 系列 盒子 。 第 一 个 盒子 是 标准 的 rotate0， 紧 接着 的 三 个 盒子 则 用 单 
个 2D 的 轴 属 性 分 别 围绕 X 轴 、Y 轴 和 Z 轴 旋 转 180”， 最 后 三 个 盒子 用 transform: rotate3d0 产 生 同 
样 的 效果 。 注 意 ， 通 过 rotateZ(180deg) 或 rotate3D(0,0,1,180deg) 围 绕 Z 轴 进 行 旋转 实际 上 与 
rotate(180deg) 相 同 。 所 包含 的 元 素 有 些 不 透明 ， 在 围绕 义 轴 和 YY 轴 旋 转 时 可 见 。 代 码 如 下 : 


div {transition: all 1s:} 

figure:hover rotate3d-x {transform: rotate3d(1.0.0.180deg):} 
figure:hover rotate3d-y {transform: rotate3d(0.1.0.180deg):} 
figure:hover rotate3d-z {transform: rotate3d(0.0.1.180deg):} 
figure:hover rotatex {transform: rotateX(180deg):} 

figure:hover rotatey {transform: rotateY (180deg):} 

figure:hover .rotatez {transform: rotateZ(180deg):} 

figure:hover rotate {transform: rotate(180deg):} /* for comparison */ 
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2. 缩放 元 素 


使 用 transform:scale0 和 transformm:scale3d0 可 以 缩放 元 素 。 

变形 函数 scale0 用 于 调整 元 素 的 尺寸 ， 它 接收 无 单位 数值 ，scale(1) 就 是 元 素 的 默认 尺寸 。 小 于 
1 的 值 使 元 素 变 小 ， 所 以 scale(.5) 将 元 素 的 尺寸 变 为 默认 尺寸 的 一 半 ; 大 于 1 的 值 使 元 素 变 大 ， 所 以 
scale(2) 将 元 素 的 尺寸 变 为 默认 尺寸 的 两 倍 。 有 以 下 形式 的 缩放 变形 函数 : 

transform: scale(s) transform: scale(sX, sY) transform: scaleX(sX) transform: scaleY(sY) 

‘transform: scaleZ(sZ) transform: scale3D(SX. sY, sZ) 

可 以 用 两 个 值 分 别 沿 着 水 平方 向 和 垂直 方向 对 元 素 进行 缩放 ， 甚 至 可 以 用 负 值 反 转 元 素 。 单 个 
函数 scaleXO 和 scaleY0 与 为 scale0 设 置 两 个 值 相同 ， 因 此 ，scaleX(2) 等 同 于 scale(2,1)。 如 图 12-6 
所 示 ， 第 一 个 盒子 使 用 一 个 值 (均匀 缩放 )， 第 二 个 盒子 使 用 两 个 值 分 别 沿 和 轴 和 立轴 进行 缩放 ， 当 
这 两 个 值 不 同时 ， 盒 子 会 产生 变形 。 里 面 的 盒子 则 用 接收 负 值 的 scale0 进 行 缩放 ， 因 此 会 收缩 至 0， 
然后 进行 反 转 。 代 码 如 下 : 

.one {transform: scale(.5);} /* the same as scale(.5..5) */ 


.one span {transform: scale(-3);} 
.two {transform: scale(.75,1):} /* the same as scaleX(.75) */ 


‘two span {transform: scale(-3,-1.5);} 


对 于 scale3d0 和 scaleZ0， 则 会 遇 到 不 具有 任何 深度 的 元 素 的 问题 。 因 此 ， 沿 着 Z 轴 进行 缩放 不 
会 产生 任何 改变 。 可 以 用 transform: translateZ0 沿 着 Z 轴 平 移 来 代替 沿 着 Z 轴 进 行 缩放 。 

3. 元 素 的 斜 切 

使 用 transform: skew0 以 及 类 似 的 函数 可 以 使 元 素 产生 和 斜 切 效果 。 

只 有 一 个 值 的 变形 函数 skew0 会 使 元 素 在 水 平方 向 (X 轴 ) 上 产生 斜 切 ， 如 果 有 第 二 个 值 的 话 ， 
那么 第 二 个 值 控制 元 素 在 垂直 方向 (Y 轴 ) 上 的 斜 切 。 和 rotate0 一 样 , 该 函数 接收 角度 单位 (deg、grad、 
rad 和 turn)。 有 以 下 形式 的 斜 切 变形 函数 : 

‘transform: skew(sX) transform: skew(sX. sY) transform: skewX(sX) transform: skewY(sY) 


图 12-7 展示 了 一 系列 元 素 斜 切 效 果 。 
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Skew(sX) Skew(9, 57) 
skev (5X) Skew(0, sy] 


12-7 一 系列 元 素 斜 切 效果 


skew0 可 以 为 负 值 和 较 大 的 值 ，skew(90deg) 会 让 元 素 消失 ， 如 同 元 素 的 两 条 平行 边 相 切 ， 而 元 
素 变 成 无 限 长 。 大 于 90deg( 或 -90deg) 的 值 会 产生 镜像 效果 ， 如 同 180deg( 或 -180deg) 的 值 会 使 图 像 
看 起 来 与 0deg 的 效果 相同 。 这 意味 着 skew(10deg) 看 起 来 与 skew(190deg) 相 同 ， 但 是 如 果 产 生动 画 ， 
在 经 过 90deg 时 会 看 起 来 有 些 怪异 。 一 般 而 言 ， 只 需要 45deg 和 -45deg 之 间 的 值 。skew0 函 数 没有 
3D 版 本 。 

当 值 为 180deg( 或 -180deg) 时 , 被 斜 切 的 元 素 看 起 来 与 skew(0) 产 生 的 效果 相同 。 当 值 为 90deg( 或 
-90deg) 时 ， 被 斜 切 的 元 素 则 会 变 得 无 限 长 并 且 难 以 辨认 (所 以 在 产生 动画 时 看 起 来 有 些 怪 异 )。 示 例 
代码 如 下 : 

.one {transform: skew(10deg);} /* the same as skewX(10deg) */ 

.one span {transform: skew(-20deg):} 

‘two {transform: skew(0,10deg):} /* the same as skewY(10deg) */ 

‘two span {transform: skew(0,-20deg):} 

.three {transform: skew(10deg.10deg):} 

‘three span {transform: skew(-20deg,-20deg);} 

M* CAUTION! large values animate unpredictably */ 

four {transform: skewX(180):} /* the same as skew(0) */ 

four span {transform: skewY(-180deg):} /* the same as skew(0.0) */ 


4. 矩阵 变换 


使 用 强大 的 transform: matrix0 和 transform3d: matrix0 可 以 进行 矩阵 变换 。 
有 6 个 值 的 transform:matrix0 可 以 同时 执行 所 有 的 2D 变形 。 拢 阵 以 具有 6 个 值 的 变形 矩阵 的 形 
式 指定 2D 变形 ，matrix(ab.c,de. 与 应 用 变形 矩阵 [ab cde 引 产生 的 效果 相同 ， 值 a 到 f 定 义 了 一 个 
3X3 变形 矩阵 。 对 于 每 种 变形 ， 第 三 行 都 是 (“0, 0, 1”)， 这 对 于 矩阵 相 乘 十 分 必要 ， 如 图 12-8 
所 示 。 
下 面 是 用 transform: matrix0 表 示 的 各 种 2D 变形 函数 : 
®translate(tX, tY) = transform: matrix(1, 0, 0, 1.fX,tY)， 其 中 多 和 tY 是 水 平方 向 和 竺 直方 向 的 
平移 值 。 
® rotate(a) = transform: matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0), 其 中 a 的 单位 为 deg。 交换 sin(a) 
和 -sin(a) 会 产生 相反 方向 的 旋转 。 注 意 ， 可 以 提供 的 最 大 旋转 角度 是 360°。 
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@ scale(sSX, sY) = transform: matrix(sX, 0, 0, sY, 0 ,0), 其 中 sX 和 sY 是 水 平方 向 和 垂直 方向 的 缩 
放 值 。 
@ skew(aX, aY) = transform: matrix(1, tan(aY), tan(aX), 1, 0 .0)， 其 中 aX 和 aY 是 水 平方 向 和 垂 
直方 向 的 值 ， 单 位 为 deg。 
当 需 要 同时 应 用 多 个 变形 时 ， 最 好 使 用 非 矩 阵 形式 的 变形 函数 ， 并 将 这 些 变形 函数 依次 列 出 ， 
如 图 12-9 所 示 。 如 果 进 行动 画 ，rotate(0) 和 rotate(180deg) 之 间 的 旋转 是 顺 时 针 进行 的 。 代 码 如 下 : 
div {transform: translate(SOpx, -24px) rotate(180deg) scale(.5) skew(0. 22.5deg):} 


ace 
让 9 日 口 
001 


图 12-8 表现 transform: matrix0 的 矩阵 图 12-9 应 用 多 个 变形 


但 是 ， 如 果 应 用 多 个 矩阵 相 乘 ， 或 者 使 用 某 种 变换 工具 ， 例 如 由 Eric Meyer 和 Aaron Gustafson 
创建 的 Matrix Resolutions(http:/j.mp/matrix-tool 和 http://meyerweb.com/eric/ tools/matrix/)， 就 可 以 用 
transform: matrix0 写 出 简略 形式 的 变形 , 通过 matrix0 进 行 与 图 12-9 中 相同 的 变形 。 此 时 ， 如 果 进 行 
动画 ， 旋 转 是 逆 时 针 进 行 的 ， 如 图 12-10 所 示 。 注 意 ， 这 里 引入 了 具有 厂商 前 组 的 CSS 代码 。 代 码 
如 下 : 

div{ 

-webkit-transform: matrix(-.5,-.207,0,-.5,50,-24); 
-moz-transform: matrix(-.5,-.207,0,-.5,50px,-24px); 


| 加 | 口 


图 12-10 通过 matrix0 进 行 与 图 12-9 中 相同 的 变形 


默认 值 是 matrix(1,0,0,1,tX,tY)， 使 用 数字 。 目 前 ， 在 Opera、Intemet Explorer 和 WebKit 中 ， 
matrix(tX，tY) 中 的 平移 只 接收 像素 值 (如 果 不 指 定单 位 )。Firefox 3.5 以 后 的 版 本 可 以 接收 长 度 值 ， 
但 是 需要 定单 位 , 从 版 本 10 开始 也 可 以 接收 无 单位 数值 。 当 对 基于 旋转 的 矩阵 进行 变形 时 , 从 0deg 
变换 到 180deg 只 能 进行 逆 时 针 旋 转 。 尽 管 对 于 多 重 变 形 而 言 ，transform:matrix( 更 为 简洁 ， 也 是 浏 
览 器 内 部 进行 变形 的 方式 ， 但 是 transform:matrix0 有 些 复杂 ， 它 并 不 是 最 好 的 选择 。 

下 面 的 示例 使 用 3D 矩阵 的 形式 来 达到 rotate3d0 的 效果 。 

transform: matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1- 

cos(angle)*x*y, y+sin(angle)+(1-cos(angle)*x*z, 0, ztsin(angle)+(1- 

cos(angle)*x*y, 1+ (1-cos(angle)*(y*y-1). -x*sin(angle)+(1- 

cos(angle))*y*z. 0, -y*sin(angle)+(1-cos(angle))*x*z, x+sin(angle)+(1- 

cos(angle)*y*z. 1+ (1-cos(angle))*(z+z-1). 0. 0. 0. 0. 1): 
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12.1.3 ”修改 变形 对 象 


1. 使 用 透视 和 transform:perspective() 函 数 将 3D 对 象 置 于 透视 角度 


变形 函数 transform:perspective0 可 以 控制 3D 变形 的 透视 和 阴影 此外， 变形 属性 perspective 可 
以 达到 同样 的 目的 ， 下 面 对 它 们 进行 比较 。 

默认 情况 下 ， 变 形 发 生 在 平面 上 ， 通 过 添加 perspective 属性 或 变形 函数 transform:perspective0， 
可 以 造成 进行 3D 变形 的 元 素 具 有 深度 的 错觉 。perspective 属性 和 变形 函数 transform:perspective0 通 
过 指定 透视 投影 矩阵 产生 作用 。 


注意 : 
尽管 变形 使 用 的 是 3D 坐标 系统 ， 但 元 素 本 身 不 是 3D 对 象 。 它 们 只 存在 于 2D 平面 上 ， 并 且 不 
具有 深度 。 


如 果 将 透视 看 作 锥 体 ， 那 么 场景 位 于 锥 体 底部 ， 而 观察 者 位 于 锥 体 项 部 ， 透 视 值 即 观察 者 和 场 
景 之 间 的 距离 。 锥 体 越 短 , 镜头 风格 的 失真 就 越 明显 .perspective 属 性 和 变形 函数 transform:perspective0 
都 有 一 个 长 度 值 用 于 控制 透视 收缩 。 例如 , 2000px 就 很 不 错 , 800px 会 产生 明显 的 透视 收缩 , 而 250px 
就 会 造成 极 严重 的 失真 。 这 个 长 度 值 必须 大 于 0， 如 果 值 不 带 单位 ， 则 被 当 作 像素 处 理 。 应 用 透视 
还 会 使 具有 较 大 Z 轴 值 的 元 素 看 上 去 更 大 ， 如 图 12-11 所 示 。 图 中 显示 了 分 别 通过 rotateY(-45deg)、 
TotateY(-112.5deg) 和 rotateY(-180deg) 产 生 旋转 的 元 素 应 用 不 同 perspective0 变 形 函 数值 的 效果 ， 也 可 
以 通过 将 perspective 属 性 应 用 于 容器 元 素 获得 同样 的 效果 。 


注意 时 
使 用 变形 函数 perspective0 只 会 影响 紧 接 其 后 的 元 素 。 例 如 ，transform:perspective(800px) 
TotateY(-45deg) 会 产生 透视 效果 ， 但 是 transform: rotateY(-45deg) perspective(800px) 却 不 会 。 


box { 
transform-origin: left center; 
transition: all 1s; 
} 
/* using the perspective() transform function */ 
‘one .box {transform: perspective(2000px) rotateY(-4Sdeg);} /* slight perspective */ 
.two .box {transform: perspective(800px) rotateY (-45deg):} /* perspective */ 
three .box {transform: perspective(250px) rotateY(-45deg):} /* fish-eye */ 
* alternatively, using the perspective property 
‘four {perspective: 2000px:} 
five {perspective: 800px;} 
.Six {perspective: 250px:} 
‘four box, five .box, .six .box {transform: rotateY(-45deg):} 
Neh 
.container:hover .box {transform: rotateY(-180deg):} 
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12-11 ”为 旋转 的 元 素 应 用 不 同 perspective0 变 形 函 数值 的 效果 


上 述 两 种 方法 的 区 别 在 于 变形 函数 transform:perspective0 将 透视 直接 应 用 于 元 素 , 而 perspective 
属性 会 将 透视 应 用 于 元 素 的 子 元 素 。 如 果 将 3D 变形 应 用 于 多 个 元 素 并 在 一 个 包装 器 元 素 上 应 用 透 
视 ， 那 么 所 有 子 元 素 都 将 处 于 同一 3D 空间 中 。 具 有 透视 效果 的 元 素 的 尺寸 会 影响 子 元 素 的 阴影 数 
量 ， 就 如 同 使 用 非 默认 的 transform-origin 属性 一 样 。 

2. 使 用 perspective-origin 属性 修改 透视 原点 


perspective-origin 属性 会 设置 透视 原点 ， 默 认 情况 下 透视 原点 是 元 素 的 中 心 (perspective-origin: 
50% 50%)。 它 接收 长 度 、 百 分 比 和 关键 字 ( 例 如 transform-origin 属性 的 义 值 和 YY 值 )。 当 使 用 两 个 关 
键 字 或 一 个 不 同 于 center 的 关键 字 以 及 一 个 值 时 ， 浏 览 器 会 算出 哪个 值 是 X(=left 或 right)、 哪 个 值 
是 Y(=top 或 bottom)。 否 则 ,第 一 个 值 位 于 义 轴 上 ， 第 二 个 值 位 于 Y 轴 上 。 因 此 ， 即 使 在 使 用 关键 
字 时 ， 也 要 坚持 perspective-origin: pX pY 的 默认 顺序 。 回 顾 一 下 透视 锥 体 ， 修 改 perspective-origin 
就 如 同 移动 锥 体 项 部 (观察 者 的 位 置 )， 使 其 远离 场景 的 中 心 。 代 码 格式 如 下 : 

Perspective-origin: pX: 

perspective-origin: PY; /* iftop or bottom */ 

Perspective-origin: pX pY; 


3. 用 transform-origin 修改 变形 


transform-origin 可 以 设置 变形 动作 的 中 心 , 这 个 中 心 实 际 上 会 修改 最 终 的 变形 。transform-origin 

接收 4 个 值 : 

e@ ”如 果 有 一 个 值 或 两 个 值 ， 那 么 值 可 以 为 关键 字 、 长 度 和 /或 百分比 。 长 度 和 百分比 从 左上 角 
(0.0) 开 始 计算 。 

e@ 3D 变形 可 以 接收 3 个 值 ， 其 中 前 两 个 值 可 以 是 关键 字 、 长 度 和 /或 百分比 , 但 是 第 三 个 值 必 
须 是 长 度 。 

e@ 2D 变形 可 以 接收 3 个 值 或 4 个 值 ，4 个 值 表 示 偏 移 并 且 必 须 写成 关键 字 后 加 长 度 或 百分比 
的 两 个 组 合 ， 例 如 transform-origin: top 12px right 0。 如 果 只 有 3 个 值 ， 那 么 缺少 的 偏 移 值 被 
假定 为 0， 例 如 transform-origin: top 12px right( 注 意 对 3 个 值 的 支持 刚 开 始 ， 现 有 的 浏览 器 
只 使 用 前 两 个 值 )。 

默认 情况 下 , 区 和 人 这 是 50%, 包 是 0, 所 以 对 于 2D 变形 , 默认 值 是 transform-origin: 50% 50%; 

对 于 3D 变形 ， 默 认 值 是 transform-origin: 50% 50% 0。 与 perspective-origin 一 样 ， 当 仅 使 用 关键 字 时 ， 
应 保持 标准 的 顺序 : PXOYGZ))。 代 码 格式 如 下 : 
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transform-origin: {X: 

transform-origin: tY; /* ftop or bottom */ 

transform-origin: fXtY: 

transform-origin: tX tY {tZ: /* fora 3D transform */ 

与 前 面 图 12-4 中 的 transform:rotate0 示 例 相 比较 , transform-origin 产生 的 结果 有 何不 同 ? 前 面 的 
例子 没有 指定 transform-origin， 所 以 使 用 了 默认 值 ， 即 元 素 的 中 心 。 在 图 12-12 中 ， 外 面 的 盒子 仍 
然 保持 原样 ， 但 是 里 面 的 盒子 通过 transform-origin 使 用 了 不 同 的 角 ， 图 中 用 方形 角 表 示 原 点 。 代 码 
如 下 : 

A Figure 12-4 code, plus， */ 

top-left { 

border-top-left-radius: 0; 
transform-origin: left top; /* the same as 00 */ 


transform-origin: left bottom: /* the same as 0 100% */ 

} 

‘top-right { 
border-top-right-radius: 0; 
transform-origin: right top; /* the same as 100% 0 */ 

} 

bottom-right { 
border-bottom-right-radius: 0; 
transform-origin: right bottom: /* the same as 10096 100% */ 


} 
/十 
NA 
加 国 区 
] U 


图 12-12 ”使 用 不 同 的 transform-origin 

执行 3D 变形 的 transform-origin 只 是 对 前 面 见 过 的 2D 变形 的 transform-origin 加 上 针对 Z 轴 的 
长 度 值 。 值 越 大 ， 产 生 的 效果 越 超 乎 寻常 ， 如 图 12-13 所 示 。 

.Container {perspective: 800px;} 

.container:hover span {transform: rotate3d(1.1.0.180deg): /* inner box */} 

‘top-left {transform-origin: left top 20px:} 

.bottom-left ftransform-origin: left bottom 40px:} 

‘top-right {transform-origin: right top 8Opx:} 
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bottomr-right {transform-origin: right bottom 160px:} 


+ wp kf | + bonom kf +t top fight | bonom fight 
< 
< 
E> 


图 12-13 ”使 用 具有 较 大 Zz 值 的 3D transform-origin 创建 transform: rotate0 


4. 使 用 transform-style 进行 3D 或 平面 变换 


默认 情况 下 ， 元素 与 其 父 元 素 处 于 同一 平面 上 ， 并且 具有 由 HTML 源 代码 指定 的 释放 顺序 。 我 
们 可 以 用 z-index 修改 é 千 放 顺 序 ， 但 默认 的 transform-style 在 同一 平面 上 。 为 了 再 次 见识 一 下 Z 轴 变 
形 的 效果 ， 我 们 需要 使 用 transform-style: preserve-3d， 这 种 用 法 也 会 对 元 素 的 子 元 素 起 作用 。 

对 于 3D 变形 而 言 ， 可 将 transform-style:preserve-3d 和 perspective 属性 或 变形 函数 perspective() 
结合 起 来 使 用 。3D 变形 也 许 会 导致 某 些 元 素 隐藏 到 另 一 些 元 素 之 后 ， 所 以 需要 显 式 地 在 某 个 元 素 
上 使 用 transform-style:flat 来 重 写 祖辈 元 素 的 preserve-3d 值 。 


5. 隐藏 和 显示 变形 元 素 的 背面 


可 以 使 用 backface-visibility 隐藏 和 显示 变形 元 素 的 背面 。 当 元 素 在 3D 空间 中 绕 义 轴 或 Y 轴 旋 
转 180" 以 上 时 ， 默 认 情况 下 元 素 的 背面 是 可 见 的 。backface-visibility 属性 允许 隐藏 元 素 的 背面 ， 举 
例 来 说 ， 这 一 点 可 用 于 从 两 个 背面 对 齐 的 元 素 创建 双 面 纸牌 ， 也 可 用 于 方便 地 创建 3D 盒子 和 空间 。 
如 图 12-14 所 示 ， 如 果 不 具 有 backface-visibility 属性 ， 当 翻动 纸牌 时 就 会 出 现 变换 断裂 。 


‘front {transform: rotate3d(0,1.0.180deg):} 
.card:hover back {transform: rotate3d(0.1.0.180deg):} 
.card:hover front {transform: rotate3d(0.1.0.0deg):} 
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图 12-14 ” 翻 牌 变换 


12.1.4 ”浏览 器 对 CSS 变形 的 支持 


CSS 变形 易于 设计 大 量 的 变换 ， 在 不 支持 变形 的 浏览 器 中 如 果 没 有 备 选 的 话 ， 就 可 能 会 出 现 断 
裂 。 尽 管 2D 变形 在 现代 浏览 器 中 可 以 得 到 相当 好 的 支持 ， 但 是 早期 版 本 的 正 缺少 这 种 支持 。 变 形 
函数 scale0 的 效果 可 以 通过 正 的 CSS zoom 属性 得 到 ， 其 他 的 2D 变形 可 以 通过 MS Matrix 过 滤器 
得 到 。 

对 于 3D 变形 ， 有 限 的 浏览 器 支持 以 及 缺乏 相应 的 功能 插件 严重 限制 了 应 用 变形 的 场合 ， 而 且 
其 性 能 也 无 法 胜任 游戏 编程 。 


1. 浏览 器 对 2D 变形 的 支持 


包括 Intemet Explorer 9 在 内 的 现代 浏览 器 都 支持 2D 变形 ， 甚 至 最 新 版 本 的 Intemet Explorer、 
Firefox 和 Opera 不 需要 厂商 前 绥 就 可 以 更 好 地 支持 2D 变形 ， 如 表 12-2 所 示 。 
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表 12-2 对 2D 变形 的 浏览 器 支持 情况 


Opera 
10.5-0-12.5 


3.S-moz-16 3.1-webkit- i 10.5-0-12.5 


transform:rotate() | 9-ms-10 3.5-moz-16 3.1-webkit- - it- 10.5-0-12.5 
transform:scaleO | 9-ms-10 3.5-moz-16 3.1-webkit- n i 10.5-0-12.5 
transform:skew() | 9-ms-10 3.5-m0z-16 3.1-webkit- -webkil 10.5-0-12.5 
transform:matrix() | 3.5-moz-10-moz-16 3.1-webkit- | i 10.5-0-12.5 


3.5-moz-16 3.1-webkit- 地 i 10.5-0-12.5 


2. 浏览 器 对 3D 变形 的 支持 
浏览 器 对 3D 变形 的 支持 情况 如 表 12-3 所 示 。 


表 12-3 对 3D 变形 的 浏览 器 支持 情况 


属性 下 Chrome 
transfommGD 变 胸 ioms - 
anstomtaaslatead0 loms - 
transformaotate3d) loms- - 
anstomscale3d0 loms- - 
I EE=IFPS 生 下 
| iomoz | 


4.0.5-webkit- 12-webkit- 


transform:matrix3d0 10-ms- 
transform:perspective() 10-ms- 
perspective 10-ms- 4.0.5-webkit- 12-webkit- 和 
perspective ongi io- - 
transform-origin: XY Z 10-ms- | 4.0.5-webkit- 12-webkit- - 
transfommsyle 10-ms- - 
backfoce-vioibil oms | lomoz | soswevie | lzwebat | - 


3. 扩展 浏览 器 对 CSS 2D 变形 的 支持 


如 果 要 扩展 对 2D 变形 的 浏览 器 支持 ,可 以 使 用 Intemet Explorer 专 有 的 CSS 过 滤器 属性 ， 也 就 
是 translate: matrix0 的 前 级 ， 支 持 正 6-IE8。 

如 果 选 择 功能 插件 方法 ， 那 么 有 两 个 JavaScript 功能 插件 可 以 将 2D 变形 的 CSS 代码 快速 转换 
成 Intemet Explorer 专 有 的 CSS 过 滤器 属性 。 

Transformie(http://transformie.cony) 是 一 个 由 Paul Bakaus 创建 的 jQuery 插件 , 可 以 为 正 6-8 添加 
基本 的 变形 支持 。 

由 Zoltan“Du Lac”Hawryluk 创建 的 cssSandpaper 为 下 6~IE8 和 Opera 10.0 以 上 版 本 添加 了 变 
形 支持 ， 此 外 还 可 以 添加 box-shadow、 线 性 渐变 和 放射 渐变 支持 。 

最 后 ， 变 形 、 变 换 和 动画 也 可 以 通过 JavaScript 实现 (参见 http:/j.mp/jq-effects 和 
http://apijquery.com/category/effects/)。 CSS 2D 和 3D 变形 可 以 通过 Modemizr 检测 ,所 以 可 以 设置 备 
选 内 容 ， 或 者 通过 2D 变形 功能 插件 扩展 不 支持 变形 的 浏览 器 的 功能 ， 或 者 使 用 合适 的 非 变形 蔡 换 
方案 ， 例 如 图 像 。 
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Css 变换 和 CSS 动画 


通过 CSS 变换 和 CSS 动画 ， 可 以 根据 时 间 改 变 元 素 ， 包 括 使 用 了 CSS 变形 的 元 素 。 
CSS 变换 提供 了 一 种 创建 简单 动画 的 途径 。 但 是 动画 的 起 始 和 终止 状态 由 现 有 属性 值 控制 ， 变 
换 只 是 提供 对 动画 过 程 的 一 些 控制 。 
CSS 动画 引入 了 定义 好 的 动画 , 在 其 中 可 以 将 随时 间 改 变 而 产生 的 CSS 属性 变化 作为 一 组 关键 
帧 。 动 画 在 随时 间 改 变 CSS 属性 的 外 在 值 方面 与 变换 十 分 相似 。 
CSS 变换 和 CSS 动画 的 区 别 : 
e@ CSS 变换 可 以 被 CSS 状态 的 改变 和 JavaScript 触发 ， 而 CSS 动画 在 默认 情况 下 一 旦 被 声明 
就 会 开始 播放 ， 尽 管 也 可 以 用 CSS 状态 的 改变 和 JavaScript 来 触发 CSS 动画 。 状 态 改 变 的 
一 个 例子 是 将 鼠标 悬 停 在 具有 :hover 属性 的 元 素 上 。 
e@ CSS 变换 是 将 变换 应 用 于 已 有 的 即时 改变 ，CSS 动画 则 会 向 元 素 添加 样式 并 让 使 用 这 些 样 
式 的 元 素 产生 动画 。 
e@ CSS 变换 出 现 于 两 个 固有 样式 ( 指 应 用 变换 或 动画 之 前 的 样式 ) 之 间 ， 元 素 在 CSS 变换 前 后 
的 内 在 样式 会 得 到 触发 ， 例 如 non-:hover 和 :hover values。CSS 动画 则 会 从 元 素 的 内 在 状态 
开始 并 且 会 在 多 个 关键 帧 之 间 产 生动 画 。 默 认 情况 下 ， 元 素 会 在 动画 结束 时 返回 其 内 在 状 
e@ CSS 变换 很 简单 ， 并 且 具 有 更 宽泛 的 浏览 器 支持 。CSS 动画 则 更 加 强大 和 复杂 ， 得 到 的 浏 
览 器 支持 也 较 少 。 
表 12-4 对 CSS 变换 和 CSS 动画 之 间 的 差别 进行 了 总 结 。 


表 124 CSS 变换 和 CSS 动画 之 间 的 区 别 


元 素 在 状态 改变 前 后 的 样式 (两 个 状 
状态 中 的 CSS 修改 ，JavaScrip 
状态 的 改变 是 即时 的 


CSS 变换 


链接 翻转 以 及 :link、:visited、:hover、:focus、:active 等 伪 类 可 以 提供 基本 的 交互 性 。 这 些 功 能 
十 分 有 用 ， 但 是 持续 时 间 很 短暂 。 
CSS Transitions 模块 具有 控制 现 有 CSS 属性 变化 的 能 力 ， 使 其 随 着 时 间 变化 从 一 个 值 变 为 另 一 
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个 值 。 可 以 通过 修改 状态 中 的 CSS 来 应 用 这 些 变换 。 变换 包括 的 伪 类 有 :link、:visited、:hover、:focus、 
:active、:disabled、:enabled 和 :checked， 还 包括 使 用 @media queries 和 JavaScript， 例 如 通过 向 元 素 添 
加 类 来 使 用 JavaScript。 


12.3.1 使 用 transition-property 设置 可 变换 的 属性 


transition-property 允许 用 默认 值 all 为 变换 指定 一 个 或 多 个 由 逗号 分 隔 的 可 设置 动画 的 CSS 属 
性 。 注 意 具 有 厂商 前 缀 的 属性 也 需要 为 transition-property 加 上 对 应 的 厂商 前 级 。 例 如 ， 以 下 就 是 应 
用 于 transform 属性 的 具有 厂商 前 缀 的 transition 代码 : 


postcard { 
-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform; 
-ms-transition-property: -ms-transform; 
‘transition-property: transform:; 


1. 针对 CSS 变换 和 CSS 动画 的 可 设置 动画 属性 
可 以 将 CSS 变换 应 用 于 很 多 CSS 属性 ， 如 表 12-5 所 示 。 


表 12.5 可 设置 动画 的 CSS 属性 (针对 CSS 变换 和 CSS 动画 ) 
属性 关 型 | 属性 名 | 可 设置 的 变换 全 


catch-all all (所 有 可 设置 的 变换 属性 ) 
color color 
font-size 长 度 、 百 分 比 
font-weight 数字 、 关 键 字 ( 除 了 bolder 和 lighter) 
letter-spacing lengtl 

文本 属性 line-height 数字 、 长 度 、 百 分 比 
text-indent 长 度 、 百 分 比 
text-shadow, shadow 
vertical-align 关键 字 、 长 度 、 百 分 比 
word-spacing 长 度 、 百 分 比 
background color( 目 前 
background-color color 
background-image 图 像 、 渐变 
background-position 百分比 、 长 度 

例子 属性 border-left-color 等 color 
border-spacing 长 度 
border-left-width’” 长 度 
border-top-left-radius 等 百分比 、 长 度 
box-shadow shadow 
clip Tectangle 
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( 续 表 ) 
属性 类 型 属 性 名 可 设置 的 变换 值 
crop ectangle 
height、min-heigh、 max-height 长 度 、 百 分 比 
margin-left 等 长 度 
opacity 数字 
盒子 属性 outline-width 长 度 

outline-offset 整数 
outline-color color 
padding-left 等 长 度 
width、min-width、max-width 长 度 、 百 分 比 
bottom 长 度 、 百 分 比 
top 长 度 、 百 分 比 
orid-* Various, 

a left 长 度 、 百 分 比 

ENE right 长 度 、 百 分 比 
visibilit visibili 
z-index, 整数 
zoom 数字 
fill 绘图 服务 器 
fill-opacit 浮 点 数 
flood-color color、 关 键 字 
lighting-color color、 关 键 字 
marker-offset 长 度 
stop-color color 
stop-opacit 浮 点 数 

Se stroke 绘图 服务 器 
stroke-dasharra 数字 列表 
stroke-dashoffset 数字 
stroke-miterlimit 数字 
stroke-opacity 浮 点 数 
stroke-width 浮 点 数 
viewport-fill color 
viewport-fill-opaci color 


2. 使 用 max-width 和 max-height 模拟 具有 auto 值 的 width 和 height 


在 auto 值 和 0 之 间 产 生动 画 对 于 创建 某 些 效果 十 分 有 用 ， 例 如 jQuery 的 slideToggle 效果 中 所 
演示 的 “滑动 抽 层 ”效果 。 可 以 分 别 通过 替换 max-width 或 max-height 的 值 来 模拟 从 width 和 height 
变换 到 auto 或 者 从 auto 变换 到 width 和 height， 产 生变 换 的 盒子 比 它 所 包含 的 内 容 要 多 ， 如 图 12-15 
所 示 。 
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‘box { 
max-height: Sen; /* larger than your content 200px would also work here */ 
overflow: hidden: /* otherwise the text will be visible */ 
padding: .Sem .25em; 
transition: all 0.5s; 

} 

“wrapper:hover .box { 
max-height: 0; 

‘opacity: 0; 
padding: 0 .25em; 

} 


Transitioning opacity Transitioning opacity 
| and venical naddina | and vertical padding 


12-15 ”通过 为 max-height 加 上 透明 度 和 内 边 距 来 模拟 从 height: auto 到 height: 0 的 变换 


这 对 于 模拟 高 度 动画 很 有 帮助 ， 因 为 不 能 使 用 固定 高 度 ( 单 位 为 px)， 用 户 肯 定 会 调整 大 小 。 而 
较 大 的 值 会 导致 延迟 ， 所 以 使 用 单位 为 em 的 max-height 更 安全 。 在 前 面 这 个 例子 中 ， 盒 子 大 约 有 
Sem 高 ， 所 以 使 用 了 max-height: 8em。 


12.3.2 ”使 用 transition-duration 控制 变换 的 持续 时 间 


transition-duration 属性 可 以 设置 变换 的 持续 时 间 , 它 接收 以 秒 (s) 或 毫秒 (mms) 为 单位 的 时 间 值 。 图 
12-16 展示 了 三 个 持续 时 间 的 比较 。 

.one {transition-duration: .2s;} 

‘two {transition-duration: .4s:} 

,three {transition-duration: 1s;} 


图 12-16 三 个 变换 持续 时 间 的 比较 


变换 的 持续 时 间 给 人 留 下 的 印象 会 受 状态 改变 程度 的 影响 。 对 于 链接 的 明显 不 同 的 :hover 状态 
而 言 ， 与 transition-duration: .2s( 或 transition-duration: 200ms) 一 样 快 的 变换 会 快速 平滑 地 改变 状态 ， 
但 是 太 快 的 变换 就 会 变 得 和 没有 变换 毫 无 区 别 。 对 于 精细 的 变换 而 言 ，0.4s( 或 400ms) 易 于 产生 较 好 
的 效果 。 但 是 ， 如 果 将 元 素 移动 任意 距离 ，0.4s 就 太 短 了 。 较 长 时 间 的 变换 会 使 其 自身 得 到 更 多 的 
关注 ， 但 不 滥用 这 样 的 变换 对 特定 的 效果 十 分 有 用 ， 和 transition-timing-function 属性 结合 使 用 时 更 
是 如 此 。 


12.3.3 transition-timing-function、 三 次 贝 塞 尔 曲 线 和 steps() 函 数 


fransition-timing-function 属性 基于 贝 塞 尔 曲 线 ， 就 是 沿 着 一 条 弧 运动 。 三 次 贝 塞 尔 曲线 有 4 个 
点 : 起 始点 和 终止 点 位 于 一 个 正方 形 对 角 线 的 两 端 一 一 (0,0) 和 (1,1)， 另 外 两 个 点 控制 定义 曲线 的 句 
柄 , 如 图 12-17 所 示 。 相反 , 步 进 函数 (steps0 等 ) 根 据 步 长 的 数目 将 变换 分 割 为 若干 相等 的 时 间 间 隔 。 
transition-timing-fonction 属性 可 以 按照 cubic-bezier(X1, Y1, X2, Y2) 的 模式 ， 通 过 针对 起 始点 和 
终止 点 设置 X、Y 的 句柄 位 置 创建 自 定义 的 三 次 贝 塞 尔 曲 线 。 此 外 , 该 属性 还 有 一 些 常 见 的 预 设 值 。 
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e@ linear: 变换 具有 常 值 速度 ， 等 同 于 cubic-bezier(0, 0. 1.0. 1.0)。 
e@ ease: 默认 变换 ， 变 换 迅 速 开始 ， 然 后 逐渐 变 慢 ， 类 似 于 更 快 和 更 平滑 版 本 的 ease-out， 等 
同 于 cubic-bezier(0.25, 0.1, 0.25, 1.0)( 默 认 )。 
e@ ease-in: 变换 开始 时 较 慢 ， 并 且 逐 渐 加 速 直至 结束 ， 等 同 于 cubic-bezier(0.42, 0, 1.0,1.0)。 
e@ ease-out: 变换 开始 时 较 快 ， 然 后 逐渐 变 慢 ， 等 同 于 cubic-bezier(0, 0, 0.58, 1.0)。 
e@ ”ease-in-out: 变换 在 开始 和 结束 时 较 慢 , 但 在 中 间 变 得 较 快 , 等 同 于 cubic-bezier (0.42, 0, 0.58， 
1.0)。 
steps0: 变换 逐步 推进 ， 而 不 像 基于 贝 塞 尔 曲线 的 变换 那样 光滑 。 它 有 一 个 表示 步 长 数目 的 参 
数值 ， 也 可 以 设置 两 个 参数 值 。 其 中 ，step-start 表示 变换 是 即时 的 ， 一 旦 被 触发 就 立即 发 生 ， 等 同 
于 steps(1,start); step-end 表示 变换 是 即时 的 ， 但 是 在 transition-duration 结束 时 才 会 发 生 ， 等 同 于 
steps(1,end)。 
虽然 值 linear 可 以 使 具有 小 运动 的 变换 更 加 平滑 ， 但 默认 值 ease 是 很 好 的 通用 选择 。 尽 管 预 设 
值 一 般 来 说 已 经 足够 了 ,但 是 对 于 要 产生 特定 效果 的 时 间 较 长 的 变换 而 言 , 可 以 使 用 cubic-bezier(X1, 
YY1, X2, Y2) 创 建 自 定义 的 贝 塞 尔 计时 函数 。 
立 值 可 以 小 于 0 和 大 于 1.0， 从 而 导致 变换 具有 “弹性 ”， 如 图 12-18 所 示 。 


cubic-bezier(.25,.1, .25,1) cubic-bezier(.7,-8,2,.2,1.3) 
| 
过 
| 
/ | 
l 
图 12-17 三 次 贝 塞 尔 曲线 图 12-18 具有 弹性 的 三 次 贝 塞 尔 值 


首先 使 用 clamped 备 选 ( 值 在 0 一 1 之 间 ), 然后 逐步 添加 具有 小 于 0 或 大 于 1 的 Y 值 的 三 次 贝 寨 
尔 计时 函数 ， 如 图 12-19 所 示 。 

.ease {transition-timing-finction: cubic-bezier(.25,.1,.25,1):} /* =ease */ 

.clamped {transition-timing-fimction: cubic-bezier(.7.0.2.1):} /* Y=0~1 */ 

‘bounce {transition-timing-function: cubic-bezier(.7.-.2,.2,1.3);} 


* our recommended way to include a cubic-bezier with bounce: */ 
.bulletproof { /* including vendor prefixes to show WebKit fallback +/ 
-webkit-transition-timing-fimction: cubic-bezier(.7.0.2.1); /* fallback */ 
-webkit-transition-timing-function: cubic-bezier(.7,-.2..2.1.3): 
-moz-transition-timing-ftnction: cubic-bezier(.7,-.2,.2,1.3): 
-ms-transition-timing-function: cubic-bezier(.7.-.2..2,1.3): 
-0-transition-timing-finction: cubic-bezier(.7,-.2,.2.1.3); 
transition-timing-function: cubic-bezier(.7.-.2..2,1.3): 
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图 12-19 逐步 添加 小 于 0 或 大 于 1 的 Y 值 的 三 次 贝 塞 尔 计时 函数 的 效果 


在 不 支持 [0,1] 范 围 外 的 Y 值 的 浏览 器 中 ， 会 用 默认 的 ease 计时 函数 代替 。 通 过 在 “弹性 ”计时 
函数 之 前 增加 clapmed 备 选 三 次 ， 可 以 在 不 支持 [0,1] 范 围 外 的 Y 值 的 浏览 器 中 得 到 与 希望 的 效果 更 
接近 的 计时 函数 。 

steps0 〇 计时 函数 可 以 让 效果 在 变换 开始 或 结束 时 出 现 。 这 些 函 数 可 用 于 基于 帧 的 动画 。 

基于 三 次 贝 塞 尔 曲线 和 步 长 的 计时 函数 圳 括 所 有 可 能 的 计时 函数 。 但 是 一 些 计时 函数 ， 例 如 
Scripty2， 还 需要 类 似 CSS 动画 或 JavaScript 之 类 的 其 他 东西 。 


12.3.4 ”使 用 transition-delay 推迟 变换 的 起 始 时 间 


transition-delay 可 以 推迟 变换 受到 触发 后 的 起 始 时 间 。 与 transition-duration 一 样 ， 它 接收 以 秒 或 
毫秒 为 单位 的 时 间 值 。 当 值 为 正 时 ， 变 换 的 延迟 由 值 的 数量 决定 ， 当 值 为 负 时 ， 动 画 会 根据 
transition-delay 的 值 开始 跳 转 ， 就 好 像 时 间 已 经 流逝 一 样 。 图 12-20 中 对 正 负 、 负 值 和 默认 的 
transition-delay:0 进行 了 比较 。 

hover .box {transition-duration: 3s;} 

:hover positive-delay {transition-delay: 1s;} /* "delay 1s" box */ 

/* transition-delay is 0 by default (the "no delay"” box) */ 

:hover .negative-delay {transition-delay: -1s:} /* "delay -1s" box */ 
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delay -ls 


12-20 一 个 3 秒 动 画 延迟 士 1 秒 的 情形 


当 变 换 被 触发 时 ， 和 触发 器 却 在 变换 完成 之 前 被 移 除 ， 例 如 鼠标 悬 停 时 会 由 :hover 触发 变换 ， 紧 
接着 鼠标 被 移出 ， 那 么 变换 就 会 从 当前 状态 反方 向 转变 到 其 初始 状态 。 如 果 有 transition-delay， 那 么 
这 种 现象 也 会 在 变换 反 转 时 出 现 。 对 于 正 值 延迟 而 言 ， 元 素 会 冻结 ， 对 于 负 值 延迟 而 言 ， 元 素 在 继 
续 进行 变换 之 前 会 跳 转 。 


12.3.5 ”多 个 变换 值 和 简写 形式 的 变换 属性 


所 有 变换 属性 都 可 以 接收 由 逗号 分 开 的 多 个 值 ， 这 样 可 以 让 多 个 具有 不 同 设置 的 属性 同时 产生 
变换 。 当 每 个 transition-* 属 性 使 用 多 个 值 时 ， 值 的 顺序 十 分 重要 ， 因 为 每 个 属性 的 值 都 根据 顺序 进 
行 组 合 。 例 如 以 下 代码 块 : 

warming { 

transition-property: left, opacity, color 
transition-duration: 600ms,300ms, 400ms: 
transition-delay: 0s.0s, 300ms; 

} /* values aligned to make their groupings clear */ 

效果 和 下 面 三 个 由 逗号 分 开 的 变换 相同 : 


warming {transition: left 600ms, opacity 300ms, color 400ms 300ms:} 


12.3.6 ”简写 变换 属性 时 值 的 排序 


在 使 用 变换 属性 时 ， 保 持 值 的 顺序 十 分 重要 ， 对 于 多 个 变换 而 言 ， 由 逗号 分 开 的 值 按 以 下 组 合 
排序 : 

(1) transition-property 

(2) transition-duration 

(3) transition-timing-function 

(4) transition-delay 

如 果 没 有 声明 值 的 话 ， 这 些 属性 就 会 使 用 默认 值 。 在 上 面 的 第 一 个 例子 中 ， 没 有 声明 
transition-timing-ftmction 的 值 ， 所 以 变换 就 会 使 用 默认 值 ease。 此 外 ， 尽 管 必须 在 第 一 个 例子 中 针对 
transition-delay 声明 值 08， 以 使 得 最 后 一 个 值 应 用 于 color 属性 ; 但 是 在 第 二 个 例子 中 ， 就 没有 必要 
这 样 做 ， 因 为 0s 是 默认 值 。 


12.3.7 ”浏览 器 对 CSS 变换 的 支持 
除了 Intemet Explorer 9 之 外 ， 现 代 浏 览 器 都 可 以 很 好 地 支持 变换 ， 如 表 12-6 所 示 。 
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表 12-6 对 CSS 变换 的 浏览 器 支持 
Firefox 


4-moz-16 3.2-webkit- 10.5-0-12.5 


3.2-webkit- 


10.5-0-12.5 


transition-timing-function 32-webkit- 1-webkit- | 10.5-0-12.5 
:stepsO S-webkit- S-webkit- | 10.5-0-12.5 
bounce G-webkit- 16-webkit- | 12-0-12.5 

transition-delay 32-webkit- lwebkit | 10so0125 


transition 3.2-webkit- 1-webkit- 


使 用 CSS 动画 制作 关键 帧 动画 


前 面 已 经 介绍 了 如 何 通过 CSS 变换 使 元 素 产生 基本 的 运动 , CSS 动画 规范 用 基于 关键 帧 的 动画 
使 运动 效果 更 进一步 。 

与 CSS 变换 不 同 , 设置 动画 的 属性 会 从 元 素 的 固有 样式 开始 变化 , 或 者 变化 为 元 素 的 固有 样式 ， 
固有 样式 是 浏览 器 用 来 显示 未 应 用 动画 的 元 素 的 运算 值 。 这 意味 着 如 果 from 或 to 关键 帧 与 元 素 的 
固有 样式 不 同 ， 那 么 当 动 画 开始 或 结束 时 ， 对 默认 动画 的 设置 这 种 变化 会 立刻 出 现 。 

CSS 动画 在 两 个 部 分 进行 添加 ， 如 下 面 的 代码 所 示 。 

(1) 包含 单个 关键 帧 的 @keyftames 代码 块 ，@keyframes 代码 块 对 动画 进行 定义 和 命名 。 

(2) 用 于 向 元 素 添加 已 命名 的 @keyframes 动画 以 及 控制 动画 行为 的 若干 animation-* 形 式 的 属性 。 

@keyframes popup {/* 一 define the animation "popup" +#/ 

from {...} /* CSS for any differences between the element’s initial state and the animation's initial state +/ 
to {...} /* CSS for the animation's final state +/ 

} 

:popup {animation: popup 1s:} /* ~ apply the animation "popup" */ 

就 像 选 择 器 一 样 ， 每 个 关键 帧 规则 的 开始 都 是 一 个 百分比 值 或 者 from( 相 当 于 0%) 与 to( 相 当 于 
100%6) 这 两 个 关键 字 之 一 ， 从 而 指定 关键 帧 在 动画 的 何 处 出 现 。 百 分 比值 表示 动画 持续 时 间 的 百 分 
比 ， 所 以 一 段 2 秒 动画 中 的 50% 关 键 帧 出 现 于 动画 的 1 秒 处 。 下 面 的 代码 展示 了 一 段 带 有 几 个 关键 

帧 规则 的 @keyframes 声明 。 

@keyframes popup { 

‘0% {...} /* the start of the animation (the same as "from") */ 
25% {...} /* akeyframe one quarter through the animation */ 
66.6667% {...} /* a keyframe two thirds through the animation */ 


10.5-0-12.5 


Ca /* the end of the animation (the same as "100%%") */ 

} 

向 关键 帧 添加 需要 设置 动画 的 属性 ， 浏 览 器 只 会 用 到 可 设置 动画 的 属性 ， 此 外 还 会 用 到 
animation-timing-fonction 属性 ，animation-timing-function 属性 只 是 重 写 了 关键 帧 动画 的 计时 函数 。 
请 参见 表 12-5 来 获取 可 设置 动画 属性 的 列表 ， 不 能 设置 动画 的 属性 (除了 animation-timing-function 
属性 之 外 ) 都 将 被 忽略 。 
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注意 : 
每 个 关键 帧 中 的 属性 值 只 在 从 不 同 的 值 变化 而 来 或 者 变 为 不 同 的 值 时 才 会 产生 动画 ， 这 些 值 不 
会 产生 级 联 效应 ， 也 不 会 被 之 后 的 关键 帧 继承 。 这 就 意味 着 必须 为 多 个 关键 帧 添加 声明 。 


在 对 动画 进行 命名 和 定义 之 后 ， 就 可 以 将 之 应 用 于 元 素 ， 并 且 可 以 通过 使 用 animation-* 形 式 的 
属性 控制 动画 的 发 生 方式 。 这些 属性 可 以 使 用 由 逗号 分 开 的 多 个 值 来 定义 多 个 动画 。 


12.4.1 


animation-name: 由 @keyframes 定义 的 动画 的 名 称 。 默 认 没 有 名 称 。 

animation-duration: 动画 发 生 一 次 的 持续 时 间 ， 单 位 是 秒 (s) 或 毫秒 (ms)。 默 认 是 08， 相 当 于 

没有 产生 动画 。 

animation-timing-function: 用 于 动画 的 计时 函数 (就 和 CSS 变换 中 的 计时 函数 一 样 )， 可 取 值 

包括 linear、ease( 默 认 )、ease-in、ease-out、ease-in-out、cubic-bezier0 、step-start、step-end 

和 steps0。 该 属性 可 以 添加 到 @keyframes 声明 中 以 重 写 动画 每 一 帧 的 animation-timing- 

function 属性 。 

animation-delay: 动画 开始 之 前 的 延迟 时 间 ， 单 位 为 秒 (s) 或 毫秒 (ms)。 默 认 是 0s。 该 属性 也 

可 以 接收 负 值 ， 负 值 使 得 动画 一 开始 就 好 像 已 经 完了 一 样 。 

animation-iteration-count: 动画 重复 的 次 数 。 可 接受 的 值 有 0( 不 产生 动画 )、 正 值 (包括 非 负 值 ) 

和 无 穷 大 。 默 认 次 数 是 1。 

animation-direction: 该 属性 可 接收 的 值 是 nommal( 默 认 ) 和 altemate， 仅 在 animation-iteration- 

count 大 于 1 时 才 生 效 。normal 使 得 动画 每 次 向 前 推进 (从 头 至 尾 )， 而 altemate 先 将 动画 向 

前 推进 ， 而 后 反 向 推进 。 

animation-fll-mode: 该 属性 通过 下 列 值 控制 起 始 关 键 帧 是 否 会 在 animation-delay 中 影响 动 

画 ， 以 及 /或 控制 动画 结束 时 是 否 保持 终止 状态 。 

。 animation-fill-mode: none: 只 在 正 的 animation-delay 属性 值 在 指定 的 时 间 结 束 后 才 应 用 起 
始 关 键 帧 值 ， 并 且 在 动画 结束 时 使 用 元 素 本 身 的 样式 。animation-fill-mode: none; 是 默认 

。 ”animation-fill-mode: forwards: 使 元 素 在 动画 结束 后 保留 最 后 一 个 关键 帧 (一 般 是 值 为 
100% 或 to 的 关键 帧 ) 定 义 的 属性 。 值 forwards( 或 值 botb) 使 得 动画 的 终止 状态 表现 得 与 
CSS 变换 产生 的 效果 相同 。 

。 ”animation-fill-mode: backwards: 在 具有 正 值 的 animation-delay 属性 指定 的 时 间 内 让 元 素 
拥有 第 一 个 关键 帧 (09% 或 fom) 定 义 的 属性 。 

。 animation-fill-mode: both;: 兼 有 animation-fill-mode: forwards 和 animation-fill-mode: 
backwards 的 功能 。 

animation-play-state: 默认 情况 下 该 属性 的 值 是 mnning， 当 值 变 为 paused 时 ， 动 画 会 暂停 。 

通过 将 值 改 回 为 mmning， 动 画 会 从 暂停 时 所 处 的 位 置 重新 开始 。 

animation : 简写 形式 的 动画 属性 ， 接 收 以 空格 分 隔 的 上 述 属性 的 列表 (除了 

animation-play-state)。 多 个 动画 之 间 用 逗号 分 开 。 


创建 一 个 简单 动画 


例 12-1: 创建 一 个 使 用 animation-name 和 animation-duration 的 简单 动画 。 
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一 个 简单 的 动画 需要 很 多 带 有 厂商 特定 的 CSS， 效 果 如 图 12-21 所 示 。 


-webkit-animation-duration: 1s: 
-moz-animation-duration: 1s; 
-ms-animation-duration: 1s; 
-0-animation-duration: 1s; 
} 
@-webkit-keyframes moveit {to {left: 100%:;}} 
@-moz-keyframes moveit {to {left: 100%;}} 
@-ms-keyframes moveit {to {left: 100%;}} 
@-0-keyframes moveit {to {left: 100%%;}} 


上 述 代码 看 上 去 比较 多 ， 因 为 编写 了 定义 动画 的 声明 (@keyframes 代码 块 ) 并 对 其 进行 了 调用 
(animation-* 属 性 )， 此 外 出 于 浏览 器 前 组 的 原因 将 声明 和 调用 写 了 四 次 , 但 是 实际 上 ， 上 述 代 码 可 以 
非常 简短 。 如 果 浏 览 器 支持 ， 可 以 只 用 下 面 的 代码 就 能 在 CSS 中 得 到 动画 。 


:hover .box { 
animation-name: moveit 
animation-duration: 1s; 

} 

@keyframes moveit {to {left: 100%;}} 


图 12-21 CSS MN 


每 个 动画 都 需要 一 个 动画 名 ， 想 要 animation-duration 的 值 大 于 默认 值 0s。 所 有 animation-* 属 性 
都 是 可 选 的 ， 因 为 它们 的 默认 值 都 无 法 阻止 动画 的 发 生 。 至 少 需要 一 个 关键 帧 来 声明 @keyframes， 
本 例 中 声明 的 是 to {left: 100%;}， 它 是 希望 这 个 动画 呈现 的 终止 状态 。 产 生动 画 的 元 素 本 身 提供 动 
画 的 初始 状态 , 因为 在 本 例 中 要 设置 动画 的 属性 lef 是 0, 所 以 不 必用 from 了 或 0% 个 显 式 指定 动画 
的 初始 状态 。 

在 上 面 的 例子 中 只 是 给 出 了 animation-name 和 animation-duration 。animation-duration 和 
transition-duration 一 样 , 值 以 毫秒 (ms) 和 秒 (s) 为 单位 . 为 了 安全 起 见 , 在 使 用 简写 形式 的 动画 属性 时 ， 
不 要 用 其 他 的 属性 值 作为 animation-name， 以 避免 可 能 的 浏览 器 错误 。 


12.4.2 ”使 用 @Kkeyframes 控制 动画 


@keyframes 可 以 创建 无 法 使 用 变换 创建 的 动画 。 本 例 十 分 简单 ， 和 在 前 面 使 用 变换 一 样 容易 ， 
仅仅 在 初始 状态 和 终止 状态 之 间 产 生动 画 ， 方 法 是 在 图 12-22 中 添加 一 些 关键 帧 。 


.box {position: absolute:} 
:hover .box { 
animation-name: shakeit: 
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animation-duration: .5s; 
} 
@keyframes shakeit { 
10%%, 37.596, 7596 {left: -1096:} 
22.5%6. 52.596 {left: 1096:} 
75% {left: -7%;} 
) 
上 面 的 @keyframes 声明 也 可 以 写成 : 
@keyframes shakeit { 
10% {left: -10%:} 
22.5% {left: 10%;} 
37.59% {left: -1096:} 
52.5% {left: 109%:;} 
75% {left: -7%;} 
2 


图 12-22 想象 一 下 这 个 盒子 会 来 回 晃动 


多 个 关键 帧 的 属性 共享 相同 的 值 时 可 以 用 逗号 分 开 ， 并 且 百 分 比 形式 的 关键 帧 属性 可 以 包含 小 
数 。 在 上 面 的 例子 中 ， 将 75% 处 的 关键 帧 值 定义 了 两 次 。 如 果 在 两 个 不 同 的 关键 帧 中 针对 同一 个 关 
键 帧 选择 器 定义 了 一 个 属性 ， 就 会 使 用 后 定义 的 值 (本 例 中 是 left:-7%)。 


12.4.3 ”使 用 animation-timing-function 属性 的 计时 函数 


animation-timing-function 和 transition-timing-finction 的 使 用 方式 相同 ， 并 且 接 收 的 值 也 相同 ， 
如 下 所 示 : 
cubic-bezier0 linear ease ease-in ease-out ease-in-out steps() step-start step-end 
使 用 动画 展示 这 些 值 可 以 获得 与 使 用 变换 和 transition-timing-function 同样 的 效果 。 此 外 ， 还 可 
以 针对 动画 的 不 同 部 分 使 用 不 同 的 计时 函数 。 
与 CSS 变换 不 同 的 是 , 动画 可 以 具有 不 止 一 个 计时 函数 ， 因 为 可 以 通过 向 关键 帧 的 规则 集中 添 
加 animation-timing-function 来 修改 每 个 关键 帧 的 计时 函数 ， 这 种 方法 仅仅 重 写 某 个 关键 帧 的 计时 函 
数 ， 在 下 面 的 代码 中 针对 图 12-22 中 的 盒子 使 用 了 这 种 方法 : 
@keyframes presets { 
33% { 
transform: translate(11396.0): 
animation-timing-fimction: step-start: 
} 
6%{ 
transform: translate(22796.0): 
animation-timing-finction: ease-out: 
} 
to {transform: translate(340%6.0):} 
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) 

上 面 的 代码 用 到 了 3 个 计时 值 。 

e@ 0 一 33%6 用 到 了 ease( 默 认 值 )。 

@ ”33% 一 67% 用 到 了 step-start， 在 33% 关 键 帧 规则 集中 进行 了 定义 。 

@ 67% 一 100% 用 到 了 ease-out， 在 67% 关 键 帧 规则 集中 进行 了 定义 。 

这 些 计 时 函数 并 没有 涵盖 你 想 要 的 所 有 计时 函数 。 可 以 用 多 个 关键 帧 (或 JavaScript) 来 模拟 这 样 
的 计时 函数 。 


12.4.4 使 用 animation-delay 修改 动画 的 起 始 方式 


animation-delay 的 值 可 以 用 来 改变 动画 的 起 始 时 间 ， 和 transition-delay 一 样 方便 。 当 值 为 正 时 ， 
起 始 的 延迟 时 间 由 值 的 数量 决定 ， 当 值 为 负 时 ， 动 画 就 会 根据 值 的 数量 进行 跳 进 ， 就 好 像 这 段 时 间 
已 经 过 去 了 一 样 。 图 12-23 显示 了 animation-delay 如 何 影响 动画 。 

:hover box {animation-duration: 3s:} 

:hover positive-delay {animation-delay: 1s:} /* "delay ls"box */ 

/* animation-delay is 0 by default (the "no delay" box) */ 

‘hover .negative-delay {animation-delay: -1s:} /* "delay -1s" box */ 


图 12-23 ”animation-delay 对 动画 的 影响 


在 上 面 这 个 例子 中 ， 默 认 的 动画 没有 声明 animation-delay， 所 以 具有 默认 值 0s， 并 且 动 画 持续 
3 秒 。 添 加 animation-delay:1s 意味 着 动画 会 在 1 秒 后 开始 ， 并 且 到 结束 时 耗费 4 秒 。 添 加 
animation-delay: -1s 意味 着 动画 会 从 现在 所 处 的 状态 立即 开始 , 并 且 时 间 好 像 已 经 过 去 了 1 秒 , 动画 
会 在 2 秒 内 结束 。 


12.4.5 ”控制 动画 的 运行 次 数 


animation-iteration-count 可 以 控制 动画 的 运行 次 数 。 

当 一 个 动画 被 触发 后 ， 默 认 情况 下 只 会 运行 一 次 ， 然 后 会 重 置 为 初始 状态 。 可 以 用 
animation-iteration-count 让 动画 运行 不 止 一 次 ， 或 者 用 值 infinite 让 动画 不 停 地 运行 ， 直 至 浏览 器 窗 
口 被 关闭 。 图 12-24 展示 了 这 种 效果 。 

:hover .box {animation-duration: 3s:} 

/* animation-iteration-count is 1 by default (the "count 1" box) */ 

:hover .two-five {animation-iteration-count: 2.5:} /* non-integers are allowed */ 

‘hover .infinite {animation-iteration-count: infinite:} /* use carefully! */ 
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l 
由 


oo 
图 12-24 ”animation-iteration-count 控制 动画 运行 多 少 次 
使 用 2.5 这 样 的 非 整 数值 可 以 在 支持 这 种 类 型 的 值 的 浏览 器 中 让 动画 运行 两 次 ， 并 且 在 动画 结 
束 前 再 运行 一 半 时 间 。 负 值 被 当 作 0 处 理 。 由 于 动画 特别 能 分 散 注意 力 ， 并 且 是 影响 性 能 的 重要 原 
因 ， 因 此 请 谨慎 使 用 值 infinite。 


12.4.6 ”结合 animation-direction 

前 面 讲 了 如 何 用 animation-iteration-count 增加 动画 的 运行 次 数 。 如果 运行 次 数 大 于 1,， 那么 就 可 
以 用 animation-direction 控制 后 面 偶数 次 的 动画 也 从 头 运行 到 尾 ( 值 nommaD)， 还 可 以 用 值 alternate 使 
动画 反 向 运行 。 由 于 animation-direction: normal 是 默认 值 ， 因 此 将 animation-direction: altemate 应 用 
于 前 面 的 那个 例子 ， 如 图 12-25 所 示 。 


:hover .box { 


3 = 一 记 一 
co 
图 12-25 ”animation-direction: altemate 改变 了 那些 animation-iteration-count 
大 于 2 的 动画 ， 使 那些 动画 在 偶数 次 运行 时 反方 向 运行 


12.4.7 ”控制 元 素 在 动画 前 后 的 表现 


使 用 animation-fill-mode 控制 元 素 在 动画 前 后 的 表现 。 除非 动画 正在 运行 ,否则 不 会 产生 任何 效 
果 。 甚 至 在 animation-delay 的 值 为 正 时 也 是 如 此 一 一 任何 起 始 关键 帧 的 值 都 只 会 在 延迟 结束 后 才 得 
到 应 用 。 这 也 意味 着 动画 与 CSS 变形 不 同 ， 默 认 情 况 下 会 在 动画 结束 时 返回 原 有 的 样式 ， 就 好 像 动 
画 触 发 器 仍然 在 起 作用 一 样 。 这 归咎 于 animation-fill-mode 属性 的 默认 值 是 none， 但 是 值 forwards、 
backwards 和 both 可 以 控制 元 素 在 动画 前 后 的 表现 。 
®@ ”animation-fill-mode: forwards: 产生 动画 的 元 素 会 保持 最 后 一 个 关键 帧 的 属性 ， 通 常 是 100% 
或 to 关键 帧 。 但 是 如 果 指定 了 animation-iteration-count 和 animation-direction， 就 不 总 会 产生 
这 样 的 效果 。 
eanimation-fll-mode: backwards: 在 具有 正 值 的 animation-delay 指定 的 时 间 内 ， 产 生动 画 的 元 
素 将 由 动画 的 from 或 0% 关 键 帧 赋予 样式 。 
® animation-fill-mode: both: animation-fill-mode: forwards 和 animation-fill-mode: backwards 表现 
的 组 合 。 
4 个 animation-fill-mode 值 产生 的 效果 ， 包 括 默认 值 none 以 及 forwards、backwards 和 both， 如 
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图 12-26 4 个 animation-fill-mode 值 产生 的 效果 和 


图 12-26 所 示 。 
a 
| 
:hover .box { 
animation-duration: 3s; 
animation-delay: 1s; 
} 
@keyframes pushit { 


‘0% {background-color: #bfbfbf:} /* start gray */ 
to {left: 10096:} /* end on the right */ 

} 

/* animation-fill-mode is none by default */ 


/* forwards: keep the animation’s final state when it ends */ 
‘hover .fill-forwards {animation-fill-mode: forwards;} 

/* backwards: use the from/0% keyframe styles during animation-delay +/ 
hover .fill-backwards {animation-fill-mode: backwards;} 


(* both: the same as forwards and backwards */ 
‘hover .fill-both {animation-fill-mode: both:} 


初始 关键 帧 的 背景 为 灰色 ， 但 是 动画 也 有 1 秒 的 延迟 。 值 backwards 和 both 在 animation-delay 
指定 的 时 间 内 使 用 0% 关 键 帧 的 样式 ， 值 forwards 和 both 保持 最 后 一 个 关键 帧 的 样式 ， 而 不 是 退回 
到 元 素 原 有 的 样式 。 这 个 动画 在 :hover 上 得 到 触发 ， 所 以 在 上 面 这 个 例子 中 ， 只 要 鼠标 悬 停 于 元 素 
上 方 ， 就 会 使 元 素 保持 最 后 一 个 关键 帧 的 样式 (通过 forwards 或 both)。 
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12.4.8 ”暂停 动画 


使 用 animation-play-state 暂停 动画 。 这 个 简单 的 属性 具有 默认 值 running， 将 值 改 为 pause 会 暂 
停 动画 ， 如 图 12-27 所 示 。 如 果 之 后 值 再 次 改 为 munning， 那 么 动画 会 从 暂停 之 处 继续 运行 。 


:hover .box { 
animation-name: runner 
animation-duration: 3s; 
animation-direction: alternate; 

} 

‘box:hover {animation-play-state: paused:;} 


:hover me to pause 


图 12-27 将 鼠标 放 在 图 像 上 时 动画 开始 运行 ， 将 鼠标 悬 停 在 盒子 上 时 动画 就 会 暂停 


当 使 用 JavaScript 结束 动画 时 ， 只 需要 移 除 应 用 动画 的 类 即 可 ， 这 样 会 即刻 将 元 素 变 为 动画 之 
前 的 状态 。 能 够 暂停 动画 并 使 其 从 暂停 之 处 继续 运行 ， 这 提供 了 优良 的 交互 选择 。 

注意 : 

不 能 用 JavaScript 通过 移 除 和 添加 应 用 动画 的 类 来 重启 动画 , 但 是 简单 的 非 JavaScript 方法 是 用 
不 同 的 名 称 定义 一 个 完全 相同 的 动画 。 


12.4.9 简略 形式 的 动画 属性 以 及 用 逗号 分 隔 的 animation-* 值 


可 以 用 简略 形式 的 动画 属性 同时 指定 几 个 值 ， 简 略 形式 的 动画 属性 接收 单个 animation-* 属 性 
(animation-play-state 除外 ) 的 值 。 
简略 形式 的 动画 属性 应 使 用 如 下 顺序 以 避免 出 现 可 能 的 浏览 器 错误 : 


(1) animation-name 


认 


(2) animation-duration 

(3) animation-timing-function 

(4) animation-delay 

(5) animation-iteration-count 

(6) animation-direction 

(7) animation-fill-mode 

例如 , WebKit 浏 览 器 需要 将 animation-name 放置 在 animation-iteration-count 和 animation-direction 
之 前 。 

使 用 单个 animation-* 属 性 的 示例 动画 如 下 所 示 : 

:hover .box { 

animation-name: runner 
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re a 
animation-timing-finction: ease-in-out:; 
animation-direction: alternate; 
} 
这 等 同 于 如 下 所 示 的 动画 属性 (但 要 短 得 多 )- 一 一 记 住 没 有 必要 包含 所 有 具有 默认 值 的 属性 ， 在 
下 面 的 例子 中 就 没有 包含 animation-delay 和 animation-fill-mode。 
hover .box {animation: runner 3s ease-in-out infinite altemate;} 
此 外 ， 针 对 单个 animation-* 属 性 和 简写 形式 的 动画 属性 ， 都 可 以 通过 用 逗号 分 开 各 个 值 来 指定 
多 个 动画 。 两 种 方法 都 在 图 12-28 中 进行 了 演示 。 本 例 中 用 到 了 两 个 动画 ， 所 以 可 以 针对 每 个 动画 
使 用 不 同 的 计时 函数 一 一 运动 的 计时 函数 是 linear， 背 景 颜色 的 计时 函数 是 steps(2)。 
/* Using individual properties for multiple animations: +/ 
:hover .box { 
animation-name: moveit, colorstep, fade; 
animation-duration: 3s; /* onevalue? */ 
animation-timing-finction: linear, steps(2,start);  /* two values? */ 
} /* values aligned to make their groupings clear */ 
* The same styles using the animation shorthand property: 
hover ,box { 
animation: moveit 3s linear, colorstep 3s steps(2,start), fade 3s linear 
3 


图 12-28 用 到 的 两 个 动画 


12.4.10 ”浏览 器 对 CSS 动画 的 支持 


CSS 动画 已 经 能 够 完全 被 Safari 和 Chrome 所 支持 ，Firefox 以 及 最 新 的 Internet Explorer 也 已 经 
增添 了 对 CSS 动画 的 支持 ，Opera 也 将 加 入 这 个 阵营 。 然 而 ， 尽 管 有 三 种 实现 方式 ， 但 是 添加 无 前 
缀 版 本 的 CSS 动画 还 不 够 稳定 。 

对 于 animation-* 属 性 和 @keyframes 代码 块 而 言 都 要 用 到 浏览 器 前 绥 , 加 上 三 种 泻 染 引擎 与 无 前 
缀 版 本 的 代码 ， 代 码 会 变 得 十 分 元 长 。 如 果 使 用 了 带 前 级 的 属性 ， 那 么 在 其 他 浏览 器 增加 带 前 级 的 
支持 时 ， 必 须 将 它们 加 入 到 代码 中 。 


下 R CSS 动画 +JavaScript 


与 变形 一 样 ， 添 加 动画 意味 着 必须 决定 在 面 对 不 支持 动画 的 浏览 器 时 如 何 处 理 。 对 于 那些 仅 增 
加 视觉 效果 的 小 动画 而 言 ， 就 没有 必要 添加 备 选 。 但 是 ， 如 果 将 动画 作为 用 户 体验 的 核心 部 分 ， 就 
需要 使 用 一 种 技术 作为 CSS 动画 的 补充 ，JavaScript、canvas、SMIL 以 及 SVG， 甚 至 Adobe Flash 
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都 可 以 成 为 备 选 。 

早期 的 方法 就 是 在 可 以 支持 的 地 方 使 用 CSS 动画 ， 再 加 上 可 产生 同样 效果 的 JavaScript 备 选 。 
可 以 使 用 很 多 框架 ， 包 括 : 

@ jQuery 内 置 的 Effects 或 jQuery UI。 

@ jQuery 插件 ， 如 jquery.transitionjs 或 jQuery.animate-enhancedjs。 

®@ YUITransition 库 。 

e 9$fx0。 

® scripty2 和 script.aculo.us。 

其 中 的 一 些 框架 是 功能 插件 ， 如 果 浏览 器 本 身 无 法 支持 CSS 动画 ,它们 可 以 将 动画 自动 转换 成 
可 产生 同样 效果 的 JavaScript 代码 。 其 他 的 框架 需要 进行 一 些 脚本 编程 ， 并 且 需 要 Modemizr 来 检测 
浏览 器 支持 。 对 于 超出 基本 的 CSS3 动画 适用 范畴 的 需求 ， 加 入 一 些 JavaScript 通常 会 有 所 帮助 ， 想 
要 获得 的 效果 越 高 级 ， 所 需要 的 JavaScript 代码 也 就 越 多 。 


本 章 小 结 


在 合适 的 场合 使 用 2D 变形 能 够 巧妙 地 改进 用 户 体验 。2D 变形 可 以 用 于 渐进 增强 ， CSS 变形 
非常 有 利于 添加 微妙 的 风格 ， 如 果 用 户 能 够 提供 支持 ， 例 如 针对 iOS 设备 的 网 站 ,那么 CSS 变形 就 
会 扮演 更 重要 的 角色 。 

CSS 变换 可 以 根据 时 间 变 化 控制 CSS 状态 的 改变 ,如果 没 有 这 些 变换 的 话 ， 状 态 的 改变 会 在 瞬 
间 发 生 。CSS 变换 提供 了 增加 UI 交互 趣味 性 的 易 用 工具 。 但 是 变换 有 局 限 性 。 一 般 情况 下 ， 变 换 
都 被 用 来 增强 用 户 的 体验 ， 所 以 对 于 那些 不 支持 变换 的 浏览 器 来 说 ， 用 JavaScript 支持 变换 并 不 
值得 。 

CSS3 动画 对 于 增强 内 容 效果 非常 好 。 为 创建 能 产生 动画 的 内 容 , 还 可 以 在 canvas、 SMIL+SVG、 
WebGL 或 Flash 中 自由 选择 。 与 变形 和 变换 一 样 ， 动 画 也 是 造成 性 能 问题 的 主要 原因 ， 甚 至 在 现代 
浏览 器 中 也 是 如 此 。 因 此 ， 建 议 在 网 页 中 还 是 应 使 用 少量 动画 。 


思考 和 练习 


1. 创建 如 图 12-29 所 示 的 变形 效果 ， 样 式 表 应 实现 以 下 功能 : 将 第 一 个 <div> 元 素 旋转 20"， 将 
第 二 个 <div> 元 素 缩小 一 半 。 作 为 参考 ， 背 景 图 片 展示 了 文档 流 中 每 个 <div> 元 素 所 处 的 位 置 。 
<div id="rotate"> 
<p>The background image of the page shows the original orientation of this element</p> 
</div> 
<div id="scale"> 
<p>Scaled. This div is defined as 500px X 200px. but is scaled to be much 
smaller as the background image of the page shows.</p> 
<div> 


和 >e4 
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图 12-29 Google Chrome 浏览 器 中 的 变形 效果 


2. 创建 一 个 针对 单个 <div> 元 素 的 简单 动画 。CSS 代码 应 实现 以 下 功能 : 

将 <div> 元 素 最 初 设置 为 100 像素 的 方块 ， 定 位 于 浏览 器 的 左 侧 边 界 。 用 @keyframes 指令 创建 
一 个 命名 为 scroll 的 对 新 动画 效果 的 引用 。 它 告知 浏览 器 将 <div> 动 态 移动 至 页 面 的 左 侧 最 远 边界 ， 
并 将 元 素 旋转 180"。 用 animation-name 属性 引用 相同 的 动画 。 用 animation-duration 属性 指明 动画 应 
持续 5 秒 。 用 animation-iteration-count 属性 指明 动画 应 无 限 持续 运行 。 最 后 ， 用 animation-direction 
属性 指明 动画 应 在 每 次 运行 时 反 转 方向 。 
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网 页 设计 综合 实例 


通过 对 前 面 章节 的 学 习 ， 相 信 读 者 已 对 利用 HTML5+CSS3 进行 网 页 设计 有 了 全 面 的 了 解 。 但 
由 于 各 章 知识 相对 独立 ， 各 有 侧重 ， 因 此 看 起 来 比较 零散 。 本 章 主要 列举 两 个 综合 应 用 设计 实例 ， 
一 个 是 基于 HTMLS5 的 贪 吃 蛇 游 戏 的 设计 与 实现 ， 另 一 个 是 旅游 网 站 网 页 的 开发 与 设计 。 本 章 通 过 
对 完整 的 项 目 实例 进行 解析 与 实现 ， 提 高 读者 的 项 目 分 析 能 力 以 及 强化 对 HIML5、CSS3 与 
JavaScript 的 综合 应 用 能 力 ， 并 巩固 前 面 所 学 的 知识 。 


本 章 的 学 习 目标 : 
@ 了 解 如 何 综合 应 用 HTML5、CSS3 与 JavaScript 开发 Web 网 站 首页 
e@ 了 解 如 何 综合 应 用 HIML5、CSS3 与 JavaScript 开发 网 页 版 单机 游戏 


设计 旅游 网 站 网 页 


随 着 互联 网 的 发 展 ， 很 多 公司 为 了 方便 客户 了 解 本 公司 的 业务 ， 都 会 创建 属于 公司 自己 的 门户 
网 站 。 不 论 哪 种 类 型 的 网 站 都 要 给 用 户 提供 清晰 的 信息 。 目 前 通用 的 方法 是 既 提供 合理 的 布局 ， 方 
便 用 户 查 找 所 需 的 信息 内 容 ， 又 提供 丰富 的 图 片 和 文字 介绍 ， 给 用 户 更 好 的 直观 感受 。 本 节 重 点 介 
绍 一 种 较为 受用 的 网 站 静态 页 面 设计 实例 。 


13.1.1 页 面 的 设计 


这 里 设计 一 个 旅游 网 站 的 首页 ， 页 面 对 应 的 文件 为 13-1.html， 浏 览 效果 如 图 13-1 所 示 。 

例 13-1: 设计 一 个 旅游 网 站 的 首页 ， 页 面 提供 了 该 旅游 网 站 的 一 些 业 务 信息 、 旅 游 相 关 的 一 些 
咨询 信息 和 客户 旅游 心得 等 。 

页 面 布局 为 : 主 区 域 container 包含 三 个 区 域 ， 分 别 为 网 页 首部 (top 区 )、 主 内 容 区 (main 区 ) 和 页 
尾 区 (footer 区 )， 然 后 在 这 三 个 区 域内 再 次 进行 布局 划分 ， 如 图 13-2 所 示 。 
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be 

z 

让 
要 


左边 内 容 区 “中间 顶 部 内 容 区 


中 间 底 部 内 容 区 
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13.1.2 ”全 局 样式 的 设计 


网 页 的 最 顶层 是 container 区 ， 其 他 所 有 的 内 容 都 包含 在 这 个 区 域 中 ，CSS 首先 对 这 个 顶层 区 域 
和 整个 页 面 的 通用 样式 进行 设 定 。CSS 代码 如 下 : 


上 面 设置 了 超 链接 、 图 片 、 页 面 主体 的 共同 风格 ， 并 为 整个 页 面 加 了 背景 图 片 。 对 container 区 
的 设置 相对 简单 ， 主 要 是 控制 这 个 区 的 显示 和 布局 。 在 上 述 设置 中 ，container 区 的 宽度 被 设 定 为 
968px。 


13.1.3 ”网 页 首部 (top 区 ) 
top 区 分 为 三 个 区 域 ，link 区 、menu 区 、bannerwrap 区 。top 区 对 应 的 CSS 代码 如 下 : 


#op{ 
width:968px; 
} 
样式 表 很 简单 , 为 top 区 设 定 了 宽度 。 在 这 个 区 域 放置 了 链接 菜单 (link 区 )、 导航 菜单 (menu 区 )、 
横幅 广告 (bannerwrap 区 ) 三 个 小 区 域 。 其 中 ， 链 接 菜单 和 导航 菜单 的 效果 如 图 13-3 所 示 。 


旋 游 | 自 罗 | 目的 地 | 发 机 ”| 大 咎 | 精 志 题 | 预定 | 联系 我 们 
图 13-3 链接 菜单 和 导航 菜单 的 浏览 效果 
1. 链接 菜单 


(link) 区 用 来 放置 链接 菜单 , 里 面 嵌 套 了 一 个 名 为 links 的 区 域 。 在 links 区 域 中 放置 三 个 超 链 接 。 
HIML5 代码 如 下 : 
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<div id="links"><a href="#"> 网 站 首页 </a>| 
<a href="#"> 会 员 中 心 </a>| 
<a href="#">English</a> 
<div> 
</div> 


在 样式 中 ， 设 置 iink 区 的 宽度 和 高 度 。 在 网 页 中 并 没有 直接 插入 图 片 ， 而 是 在 样式 代码 里 嵌入 


Wink{ 
width:968px; 
color#f: 
background:url(../images/link jpg) no-repeat scroll right center 


2. 导航 菜单 (menu 区 ) 


图 片 链接 ， 并 且 规 定 了 link 区 中 文字 的 放置 位 置 和 超 链接 的 相关 样式 ， 默 认 去 掉 下 画 线 ， 当 悬浮 的 
时 候 出 现下 画 线 。CSS3 代码 如 下 : 


menu 区 的 作用 就 是 放置 网 页 的 导航 菜单 ， 使 用 无 序列 表 的 形式 表现 导航 菜单 。 内 容 代码 如 下 : 


<li class="main-li"><a class="li-a" hre 人 ="#"> 旅 游 </a></li> 
liclass="main-li">|</li> 

<li class="main-li"><a class="li-a" hre 人 ="#"> 自 驾 </a></li> <li class="main-li">|</li> 
<li class="main-li"><a class="li-a" hre 仁 #"> 目 的 地 </a></li> <li class="main-li">|</li> 
<li class—"main-li"><a class="li-a" href="#"> 发 现 </a></li> 
<liclass="main-li">|</li> 

<li class="main-li"><a class="li-a" hre 人 ="#"> 大 啤 </a></li> 
<liclass="main-li">|</li> 

<li class="main-li"><a class="li-a" href="#"> 精 彩 专题 </a></li> 
liclass="main-li">|</li> 

<li class="main-li"><a class="li-a" href="#"> 预 定 </a></li> 

<li class="main-li">|</li> 

<iclass=-"main-li"><a class="li-a" hre 仁 "#"> 联 系 我 们 </a></li> 
< 

<div> 
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在 样式 中 ， 分 别 规定 menu 区 的 宽度 、 高 度 、 内 留 白 ， 指 定 。 字 体 的 大 小 、 列 表 、 列 表 项 ， 以 
及 超 链接 中 相关 的 颜色 、 尺 寸 、 留 白 、 位 置 等 相关 样式 。 样 式 代码 如 下 : 


#menu{ 
width:710px; 
height:38px; 
padding-left:258px; 
font-size:14px; 

} 

#menu ul{ 
list-style:none; 
Padding-top:12px; 
height:20px; 

} 

#menua{ 
text-decoration:none; 
Color#525151; 

} 

#menu a:hover{ 
text-decoration:underline: 
color#525151; 

} 

main-menu{ 
width:710px; 

} 

main-menu .main-li{ 

float:left: 
height:30px: 
line-height:30px; 
Pposition:relative; 
z-index:1; 
text-align:center; 

} 

main-menu .main-li af 
display:block: 
color:#525151; 
font-weight:bold; 

} 

.main-menu .main-li .li-a{ 
float:left: 
width:80px; 

} 

‘main-menu .main-li .sub-menu{ 

position:absolute; 
top:30px; 
display:none: 
Zindex:2: 
left:Opx; 
width:100px: 
text-align:center: 
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} 


注意 : 

float:left 指定 元 素 脱离 普通 的 文档 流 后 产生 的 布局 ， 并 且 float 属性 必须 应 用 在 块 级 元 素 上 ， 而 
不 能 应 用 于 内 联 标记 。 换 名 话说， 如 果 为 某 个 元 素 应 用 了 float 属性 ， 那 么 这 个 元 素 将 被 指定 为 块 级 
元 素 。 

3. 网 站 的 横幅 广告 (bannerwrap 区 ) 


bannerwrap 区 是 网 页 中 放置 广告 图 片 或 宣传 图 片 的 地 方 ， 浏 览 效果 如 图 13-4 所 示 。 内 容 代码 如 下 : 
<div id "bannerwrap"> 
<a href="#"><img sre="images/banner jpg" width="968" height="190"/></a> 
<div class="clear">&enbsp;</div> 
</div> 
在 后 面 的 代码 中 , 在 很 多 地 方 会 出 现 <div class='clear></div>, 功能 是 消除 之 前 区 域 的 浮动 设置 。 
原因 是 把 之 前 div 的 float 属性 设置 成 了 left 或 right， 不 清除 浮动 的 话 ， 父 div 的 高 度 就 不 会 随 内 容 
而 增加 了 。 样 式 代码 如 下 : 
#bannerwrap{ 
height:190px: 
margin-top:3px: 


图 13-4 ”网 站 的 横幅 广告 


13.1.4” 主 内 容 区 (main 区 ) 


主 内容 区 (main 区 ) 是 首页 上 显示 主要 内 容 的 区 域 ， 这 里 被 划分 为 多 个 区 域 来 显示 不 同 的 内 容 ， 
整体 上 分 为 login、left、centertop 、centerbottom、zright 五 个 区 ， 其 中 right 区 又 划分 为 三 个 区 。main 
区 的 样式 设置 主要 针对 尺寸 和 外 边 距 。 样 式 代码 如 下 : 
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1. 登录 区 (login 区 ) 


在 这 个 区 域 中 有 一 个 登录 表单 。 其 中 ，“ 用 户 名 ”和 “密码 ”采用 text 类 型 的 文本 框 ，“ 登 录 ” 
“会 员 注册 ”“ 找 回 密码 ”按钮 使 用 image 类 型 的 文本 框 ， 这 种 类 型 文本 框 的 外 观 主要 取决 于 图 片 ， 
所 以 设计 者 可 以 利用 五 颜 六 色 的 图 片 创造 出 十 分 有 特点 的 按钮 , 效果 如 图 13-5 所 示 。 内 容 代码 如 下 : 

<div id="login"> 

<div class="userinfo"> 
用 户 名 <input type="text" name="usemame" size="14" class="input" /><br/><br/> 
密 &nbsp:&nbsp: 码 <input type="text" name="usermame" size="14"class="input" /> 
</div> 
<div class="ok"><input type="button" class="login_ok"/></div> 
<div class="register"> 
<input type="image" src="images/regjpg" width="65" height="22"/> 
<input type="image" src="images/foundpjpg" width="66" height="22"/> 


<div> 
<div> 
用 户 有 登录 
用 户 名 
害 “至 
ID 
ED ED 
13-5 登录 区 的 浏览 效果 
样式 代码 如 下 : 
Hogin{ 
width:200px; 
height:190px; 
floatright: 


background:url(../images/login_ bg.gif) no-repeat scroll 0 0; 


Padding:9px 0 0 60px; 
i 
‘login ok{ 
background:url(../images/ok jpg) no-repeat scroll 0 0: 
width:68px: 
height:22px: 
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Tegister{ 
padding:15px Spx 0 31px: 
} 


2. 左边 内 容 区 (left 区 ) 


在 这 个 区 域 中 ， 可 以 展示 当前 的 一 些 旅行 家 推荐 和 相关 
的 周边 产品 等 内 容 。 由 于 是 模拟 网 站 ， 因 此 户外 商城 和 畅销 
排行 榜 是 虚拟 的 图 片 。 这 个 区 域 分 为 第 一 行 标 记 和 下 面 的 展 
示 内 容 两 部 分 ， 如 图 13-6 所 示 。 内 容 代 码 如 下 : 

<div id="left"> 

<div class="title"> 旅 行家 推荐 <div class="more"><a href="#"><img 
<div id="leftcontent"> 
<a href="#"><img ste="images/pic_08.jpe” 
width="174"/></a> 
<a href="#"><p> 酷 署 仲夏 终于 来 了 ， 白 天 我 们 嫌 在 空调 房 
里 盼望 着 夜晚 的 来 临 ， 可 夜晚 到 了 你 有 没有 些 ….</p></a> 
<img sre="images/store.png" width="174"/> 
<img sre="images/charts.png" width="174"/> 
<div> 
<div class="clear">&enbsp:</div> 
<div> 


样式 代码 如 下 : 


#eft{ 
width:198px:/ 左 边 吃 喝 内 容 的 宽度 ， 高 度 根据 内 容 自动 增长 
border: 1px solid #C8C8C8; 
float:left; 
display:inline: 
background-color-#FSFSFS: 


} 

#eft .title{ 
text-indent:25px; 
color#fEE 
font-size: 14px; 
font-weight:bold:; 
width:192px: 
height:25px: 
margin-left:1px; 
line-height:25px: 
background:url(./images/title bg jpg) no-repeat scroll 0 0; 

外 

#left more{ 
position:absolute; 
top:6px; 
left:110px: 
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width:49px; 

height:12px: 

} 

规 eftcontent{ 
width:174px; 
padding:5px 0 0 12px: 

} 

志 eficontent p{ 
text-indent:2enm; 
text-decoration:underline; 
line-height:1.2; 
Padding:3px 10px 0 Spx; 

} 

#leficontent ul{ 
list-style-type:square; 
padding:12px 0 16px Spx; 
width:169px; 
list-style-position:inside; 

} 

#leftcontent li{ 
line-height:2.3; 
vertical-align:middle; 
‘border-bottom: 1px dashed #C4C2C2; 


3. 中 间 顶 部 内 容 区 (centertop 区 ) 


在 中 间 部 内 容 区 主要 展示 “最 新 活动 ”， 将 热门 旅游 活动 展示 出 来 ， 主 要 包括 图 片 、 价 格 和 满 
意 度 等 相关 内 容 ， 如 图 13-7 所 示 。 内 容 代码 如 下 : 


<div id="center"> 
<div class="title"> 最 新 活动 <div class="more”><a href="#"><img src="images/morejpg" /></a></div></div> 
<div id="centertop"> 
< 
<li><a href="#"><img ste="images/pic_001.jpg" width="250" /><br/><span class="money">¥ 2639 起 </span> 
<s>¥ 3639</s> <span class="satisfact"> 满 意 度 100%</span></a></li> 
<li><a href="#"><img ste="images/pic_002.jpg" width="250" /><br/><span class="money">¥ 12639 起 </span> 
<s>¥ 15999</s> <span class="satisfact"> 满 意 度 100%</span></a></li> 
<ml> 
<u> 
<li><a href="#"><img src="images/pic_004.jpg” 
width="250" /><br/><span class="money">¥ 5639 起 </span><s> 对 7639 
</s> <span class="satisfact"> 满 意 度 1009%</span></a></li> 
<li><a href="#"><img sre="images/pic_005.jpg" 注 苹 度 100% 鞋 12639 起 zoos 满意 度 100 
width="250" /><br/><span class="money">¥ 7426 起 </span><s>¥ 9854 
</s> <span class="satisfact"> 满 意 度 100%</span></a></li> 
<l> 


<div> 


时 5639 起 :xx 满意 度 100% 时 7426 起 ,ass 表意 点 100% 
图 13-7 中 间 顶 部 内 容 区 的 浏览 效果 
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样式 代码 如 下 : 


#center{ 
margin-left:7px; 
width:546px; 
float:left; 
background-color#F5F5FS5; 
" 
money{ 
colorred: 
font-size:20px; 
font-weight:bold; 
text-decoration:none; 
3 
.Satisfact{ 
color#666666; 
padding:0 0 0 20px: 
text-decoration:none; 
font-size: 15px; 
#centertop#centerbottom{ 
width:546px; 
height:449px:// 中 间 图 片 的 高 度 
border:1px solid #C8C8C8; 
. 
#centertop ul{ 
list-style:none; 
padding:9px 0 0 12px: 
} 
#centertop li{ 
Padding: Spx Spx 20px 5px; 
float:left; 
display:block 
} 


4. 中 间 底 部 内 容 区 (centerbottom) 


在 中 间 底 部 内 容 区 主要 展示 “精彩 游记 ” 
所 示 。 内 容 代 码 如 下 : 


<div id="centerbtcont"> 
<div class="pwrap'"> 


区 域 是 利用 图 文 混 排 的 样式 规划 的 ， 如 图 13-8 


<p><img sc="images/pic_07.jpg" class="imgwrap" 人 > 很 多 人 选择 清 迈 或 许 是 因为 一 部 电影 ，《 泰 回 》， 又 或 许 是 因 


为 一 个 人 ， 邓 丽 君 ， 再 或 者 是 一 个 日 子 ， 万 人 水 灯节 or 泼水 节 。 而 我 在 年 初 毫 不 犹 称 地 项 定 清 迈 的 行程 ， 并 不 是 因为 这 些 ， 
清 迈 真正 吸引 我 的 是 那里 有 我 心中 追寻 的 色彩 。 心 中 的 清 迈 ， 一 座 古朴 的 小 城 ， 没 什么 大 风景 ， 却 处 处 充满 色彩 。</p> 


<p> 那 里 有 金碧辉煌 的 庙宇 ， 那 里 有 小 清新 的 街道 ， 那 里 有 触手 可 及 的 蓝天 ， 那 里 有 色彩 斑 漳 的 拜 县 ， 那 里 还 有 


灯火 辉煌 的 夜市 …. 已 经 迫不及待 地 开启 一 段 清 迈 之 旅 ， 追 寻 我 心中 清 迈 的 色彩 ! 我 是 Nazario 罗 尼 ， 爱 生活 ， 爱 旅行 ， 爱 摄 
影 ， 爱 折腾 自己 的 游记 ， 希 望 大 家 喜欢 ! <p> 


<p><img sre="images/pic_09 jpg"” class="imgwrap2"/>Hello, Chiang Mail 


清 迈 ， 我 们 来 了 ! 
在 一 个 并 不 完美 的 季节 ， 
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用 我 们 的 方式 感受 着 小 城 清晨 的 古村 和 宁静 ， 
在 下 一 转角 邂逅 金碧辉煌 或 安静 清闲 的 佛寺 ， 
在 拜 县 假装 很 唯美 ， 留 下 我 们 最 美的 光与影 , 
在 因 他 农 山 朝 翔 天 空 ， 触 碰 那 一 片 蓝天 白云 ， 
漫步 在 色彩 斑 泣 的 宁 曼 路 ， 找 寻 那 一 抹 清新 ， 
迎 着 夕阳 在 夜市 等 待 着 华灯 初 上 的 那 份 妖娆。 
清 迈 ， 我 们 曾经 来 过 ! </p> 
<p style="text-align:right:; padding:3px 0 0 0; width:320px:"><a href="#"> 详 细 进 入 >></a></p> 
<div class="clear">&nbsp;</div> 
<ldiv> 
<div class="clear">&nbsp;</div> 
<div> 


样式 代码 如 下 : 


#centerbottom { 
margin-top:5px; 
Padding:6px 8px 0 3px; 
width:535px; 
height:242px; 

} 

#centerbottom .title.#center .title{ 
position:relative; 
text-indent:25px; 
color#EFE 
font-size:14px; 
font-weight:bold; 
width:535px: 
height:24px; 
line-height:24px; 
background:url(../images/title bg02.jpg) no-repeat scroll 0 0 #25AA9E: 

} 

#centerbottom .more.#center .more{ 
position:absolute: 
top:6px; 
left:452px: 
width:49px; 
height: 12px: 

} 

#centerbtcont { 
width:510px; 
Padding:6px 0 0 8px: 

和 

‘imgwrap { 
float:left: 

border: 1px solid blue; 
margin: Spx: 

} 

imgwrap2 { 
floatright: 

border: 1px solid blue: 
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margin:Spx; 

} 
#centerbtcont pwrap { 

Padding-top:Spx: 
} 
#centerbtcont pwrap p { 

text-indent:3em; 

line-height:1.5; 
} 
contertop 区 和 centerbottom 区 中 的 有 些 样式 设置 一 样 ， 所 以 样式 代码 中 没有 彻底 分 开 ， 可 以 将 

两 部 分 的 样式 代码 合 在 一 起 对 比 网 页 。 


详 旺 过 入 >》 
图 13-8 中间 底部 内 容 区 的 浏览 效果 


5. 右边 内 容 区 (right 区 ) 


在 这 个 区 域 中 展示 当前 的 一 些 热点 内 容 。 由 于 内 容 类 型 很 多 ， 因 此 在 这 里 又 划分 成 很 多 区 来 进 
行 排版 布局 ， 包 含 around 区 、domestic 区 、abroad 区 。 首 先 看 一 下 right 区 ， 对 应 的 CSS 代码 如 下 : 


由 于 around 区 、domestic 区 和 abroad 区 的 样式 风格 一 样 ， 因 此 下 面 先 分 别 介绍 这 三 个 区 的 内 容 
代码 ， 再 一 起 展示 样式 代码 。 

(1) around 区 的 内 容 代码 

around 区 展示 热门 头条 的 相关 内 容 ， 里 面 的 主要 内 容 由 列表 和 图 片 组 成 ， 如 图 13-9 所 示 。 内容 
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代码 如 下 : 
<div id="around"> 
<div class="title"> 热 门 头 条 
<div> 
<u> 
<li><a href="#'>【 爆 款 】 上 海 迪 士 尼 乐 园 门票 买 1 送 1</a></li> 
<li><a href="#">【 特 惠 】 三 亚 狂欢 节 第 2 人 半价 <a></li> 
<li><a href="#'>【 促 销 】 哮 期 银行 特惠 部 分 减 4000 元 </a></li> 
<li><a href="#">【 惠 游 】 欧 洲 第 2 人 5 折 中 行 卡 折 上 惠 </a></ti> 
<l> 
<img src= "images/hotpng" width="174"/> 
<div> 
(2) domestic 区 的 内 容 代码 
domestic 区 展示 国内 游 的 相关 内 容 ， 里 面 的 主要 内 容 由 列表 组 成 ， 如 图 13-10 所 示 。 内 容 代 码 
如 下 : 
<div id="domestic"> 
<div class="title"> 国 内 游 <div class="more"><a href="#"><img src="imagesmore jpg” /></a></div></div> 
<u> 
<li><a href="#'> 青 山 清 水 客家 人 </a></li> 
<li><a hre 人 ="#"> 超 详细 三 亚 自由 行 游记 </a></ii> 
<li><a hre 人 ="#'> 沿 着 海岸 去 纳凉 </a></li> 
<li><a hre 人 ="#> 全 家 香港 亲子 游 </a></li> 
<li><a hre 人 "> 去 玩 哦 旅游 烟雨 凤凰 3 日 游 </a></li> 
<li><a hre 人 ="#> 浪 漫 海滨 辽宁 四 地 5 日 游 <a></i> 
<li><a hre 伍 "> 山 不 在 高 ， 浙 江 ，。 台 州 之 旅 <la></li> 
<li><a href="#"> 维 吾 尔 族 的 历史 ， 你 了 解码? </a></li> 
<hl> 
</div> 


【 烛 浆 3 上海 迪士尼 不 园 站 村 
i 


亚 征 欢 和 香 2 人 夺 价 


去 而 莹 划 全 二 央 3 
亲生 了 宁 四 地 5 日 和 


图 13.9 热门 头条 的 浏览 效果 图 13-10 国内 游 的 浏览 效果 


(3) abroad 区 的 内 容 代码 
abroad 区 展示 境外 游 的 相关 内 容 ， 里 面 的 主要 内 容 由 列表 组 成 , 如 图 13-11 所 示 。 内 容 代码 如 下 : 


<div id="abroad"> 
<div class="title"> 出 境 游 <div class="more"><a href="#"><img src="images/morejpg" /></a></div></div> 
<u> 
<li><a href="##> 北 欧 + 峡 湾 9 日 冰 纯 天 兆 之 旅 </a></li> 
<li><a href="#> 热 浪 岛 休闲 度假 6 日 游 </a></li> 
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<li><a href="##> 爱 尔 摩 沙 度假 村 + 云顶 欢乐 游 </a></li> 
<li><a href="#"> 马 尔 代 夫 6 日 着 遥 游 </a></li> 
<li><ahre 全 学 > 悠游 巴厘 岛 半 自 助 6 日 行 <a><i> 
<li><a href="#> 超 值 香港 + 长 滩 岛 6 日 游 </a></li> 
<li><a hre 人 ="#"> 韩 国 济州 休闲 3 日 游 </a></li> 
<li><a href="#"> 赴 国际 电影 节 主办 地 </a></li> 
<li><a href="##> 哮 假 出 境 游 回 暧 </a></li> 
< 
<div> 


3 


图 13-11 境外 游 的 浏览 效果 


(4) around 区 、domestic 区 、abroad 区 的 样式 代码 


#domestic,#abroad,#around{ 
Padding-left:1px; 
border: 1px solid #C8C8C8; 
} 
#domestic .title.#abroad .title.#around .title { 
position:relative: 
text-indent:25px; 
colorffEE 
font-size: 14px; 
font-weight:bold:; 
width:200px; 
height:25px: 
line-height:25px; 
‘background:url(../images/title_ bg03.jpg) no-repeat scroll 0 0; 
} 
#domestic .more, #abroad .more.#around .more{ 
position:absolute: 
top:6px; 
left:120px: 
width:49px 
height 12px; 
} 


13.1.5 ”页 尾 区 (footer 区 ) 


首页 上 的 底部 是 页 尾 区 ， 一 般 情况 下 放置 网 站 版 权 等 其 他 信息 。 效 果 如 图 13-12 所 示 。 
页 尾 区 的 网 页 代码 结构 如 下 : 
<div id="footer"> 
<u> 
<li><a href="##> 商 家 服务 </a></li> 
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< 
<li><a href="# > 新手 上 路 <a></li> 


< 
<li><a href="#"> 网 站 荣誉 </a></li> 
< 

<li><a href="#'> 友 情 链接 </a></li> 

<li>|</> 

<li><a href="#"'> 关 注 我 们 </a></li> 


<li><img src= images/w_iconl.gif' /><img src="images/w_icon?2.gif' /><img src= "images/w_icon3.gif' /></li> 


<uP> 
<p>Copyright©2016-2017 All Rights Reserved</p> 
<div> 
样式 代码 如 下 : 
#footer { 
‘width:1004px; 
height:76px: 
border-top: 1px solid #BFBCBC; 
margin:0 auto; 
margin-top:10px; 
} 
#footer ul { 
padding:20px 0 0 330px; 
list-style:none; 
width:704px; 
float:left; 
} 
#footer li { 
display:block: 
float:left; 
margin-right: 10px; 
} 
#footerp { 
Padding:Spx 0 0 330px: 
width:704px; 
float:left: 
} 


st | xm 回国 国 
图 13-12 页 尾 区 的 浏览 效果 


设计 网 页 游戏 


下 面 介绍 网 页 版 单机 游戏 贪 吃 蛇 的 设计 ， 将 使 用 画布 作为 页 面 主 体 。 
13.2.1 游戏 简介 


贪 吃 蛇 游戏 是 一 款 经 典 的 网 页 版 单机 游戏 ， 玩 家 通过 上 、 下 、 左 、 右 按键 控制 蛇 头 的 移动 方向 ， 
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使 蛇 向 指定 的 方向 前 进 ， 并 吃 掉 随机 位 置 上 产生 的 食物 来 获得 分 数 。 每 吃 一 次 食物 ， 贪 吃 蛇 的 蛇 身 
都 会 变 长 , 并且 会 继续 在 随机 位 置 上 产生 下 一 个 食物 。 如 果 蛇 头 撞 到 墙壁 或 蛇 身 ， 则 判定 游戏 失败 。 
根据 游戏 的 难度 可 以 设置 不 同 的 游戏 速度 ， 蛇 的 息 行 速度 越 快 ， 游 戏 的 难度 越 大 。 

该 游戏 将 综合 应 用 HTML5、CSS3 与 JavaScript 相关 技术 来 实现 。 对 于 开发 者 来 说 ， 除 了 需要 
设计 游戏 的 界面 布局 外 ， 还 需要 设计 按键 的 监听 、 游 戏 速度 、 蛇 的 移动 效果 以 及 食物 的 处 理 。 游 戏 
效果 如 图 13-13 所 示 。 


基于 HTMLS 的 贪 吃 站 小 游戏 


历史 骂 高 分 为 : 50 当前 人 政 :0 


图 13-13” 贪 吃 蛇 游 戏 的 效果 图 


13.2.2 ”界面 布局 的 设计 


下 面 介绍 游戏 界面 布局 的 设计 ， 由 两 部 分 组 成 : 信息 展示 区 (包含 历史 最 高 分 和 当前 分 数 ) 和 主 
游戏 显示 区 域 。 


1. 设计 整体 界面 


首先 使 用 一 个 <div> 元 素 在 页 面 背景 上 创建 游戏 整体 界面 , 在 内 部 添加 标题 、 水 平 线 并 预 留 信息 
展示 区 和 主 游戏 显示 区 域 (游戏 画布 )。HTMLS5 代码 片段 如 下 : 
<body> 
<div id="container"> 
<h3> 基 于 HTMLS5 的 贪 吃 蛇 小 游戏 <h3> 
<h> 
<!- 状 态 信息 栏 -> 
<!-- 设 置 游戏 画布 -> 
<div> 
<body> 


这 段 代码 为 <div> 元 素 定 义 了 id="container"， 以 便 可 以 使 用 CSS 的 D 选择 器 进行 样式 设置 。 
本 例 使 用 CSS 外 部 样式 表 规定 页 面 样式 。 在 本 地 的 CSS 文件 夹 中 创建 snake.css 文件 ， 并 在 
<head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HTMLS5 代码 片段 如 下 : 


<head> 
<meta charset="utf-8"> 
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<title> 贪 吃 蛇 <ltitle> 
<link rel="stylesheet" href="css/snake.css"> 
</head> 


在 CSS 文件 中 使 用 ID 选择 器 为 id="container" 的 <div> 标 签 设置 样式 , 具体 样式 要 求 如 下 : 文本 ， 
居中 显示 ， 尺 寸 ， 宽 度 为 600 像素 ; 边 距 ， 各 边 的 外 边 距 定义 为 anto， 以 便 可 以 居中 显示 ， 内 边 距 
为 10 像素 ; 颜色 ， 背景 颜色 为 白色 ; 另外 ， 使 用 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 
灰色 阴影 。 

相关 CSS 代码 片段 如 下 : 


游戏 主 界面 的 总 体 样式 */ 


background-color:white; 
box-shadow:10px 10px 15px gray: 

} 

其 中 , box-shadow 属性 可 以 实现 边框 阴影 效果 , 4 个 参数 分 别 代 表 水 平方 向 的 偏 移 ( 向 右 偏 移 10 
像素 )、 垂 直方 向 的 偏 移 (向 下 偏 移 10 像素 )、 阴 影 宽度 (15 像素 ) 和 阴影 颜色 (灰色 )， 均 可 自 定义 成 其 
他 值 。 

由 于 网 页 的 背景 颜色 默认 为 白色 ,与 为 <div> 元 素 设 置 的 背景 颜色 相同 ; 因此 为 了 区 分 ， 将 网 页 
的 背景 颜色 设置 为 银色 (silver)。 

相关 CSS 代码 片段 如 下 : 

body{ 


background-color:silver;/* 设 置 页 面 的 背景 颜色 为 银色 */ 
} 


此 时 页 面 效果 如 图 13-14 所 示 。 


D sse 
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基于 HTML5 的 贪 吃 扎 小 游戏 | 


图 13-14 页 面 效果 
由 图 13-14 可 见 ， 对 游戏 整体 界面 的 样式 要 求 已 初步 实现 。 接 下 来 将 介绍 如 何 添加 信息 展示 区 。 
2. 设计 信息 展示 区 


信息 展示 区 位 于 主 游戏 区 域 的 上 方 , 在 游戏 主 界面 的 预 留 区 域 创建 一 个 id="status" 的 <div> 元 素 ， 
并 在 其 中 包含 两 个 <div> 元 素 ， 分 别 用 于 显示 历史 最 高 分 与 当前 游戏 分 数 。 
相关 HIMLS 代码 片段 如 下 : 
<div id="container"> 
<h3> 基 于 HTMLS5 的 贪 吃 蛇 小 游戏 <h3> 
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< 
一 -状态 信息 栏 -> 
<div id="status"> 
<!- 历 史 最 高 分 -> 
<div class="box"> 
历史 最 高 分 为 : <span id- "bestScore">0</span> 


为 显示 分 数 的 两 个 <div> 元 素 添加 class="box"， 以 便 在 CSS 样式 表 中 为 它们 设置 统一 的 样式 。 
其 中 历史 最 高 分 与 当前 游戏 分 数 均 初始 化 为 0, 并 将 分 数 各 自 嵌 套 在 <span> 元 素 中 。 为 这 两 个 <span> 
元 素 分 别 设置 id="bestScore" 和 id="currentScore， 以 方便 后 面 使 用 jQuery 语句 实时 更 新 信息 展示 区 
中 的 分 数 。 

在 CSS 样式 表 中 使 用 ID 选择 器 为 信息 展示 区 ( 栏 ) 设 置 整体 样式 ， 边 距 ， 各 边 的 内 边 距 均 为 10 
像素 ， 各 边 的 外 边 距 为 auto， 以 便 可 以 居中 显示 ; 尺寸 ， 宽 度 为 400 像素 、 高 度 为 20 像素 。 

相关 CSS 代码 片段 如 下 : 

/状态 栏 样式 9/ 


然后 使 用 类 选择 器 对 包含 class="box" 的 <div> 进 行 样式 设置 : 浮动 ， 向 左 浮动 , 尺寸 ， 宽 度 为 
200 像素 。 

相关 CSS 代码 片段 如 下 : 

个 状态 栏 中 栏目 的 盒子 样式 */ 

‘box { 

float:left: 
} 
目前 信息 展示 区 已 完成 ， 运 行 效果 如 图 13-15 所 示 。 


基于 HTMLS5 的 伟 吃 蛇 小 游戏 


历史 最 高 分 为 : 0 当前 分 数 :0 


图 13-15 信息 展示 区 的 完成 效果 
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由 图 13-13 可 见 ， 信 息 展示 区 已 完成 。 接 下 来 将 介绍 如 何 设计 主 游戏 显示 区 域 。 
3. 设计 主 游戏 显示 区 域 


主 游戏 显示 区 域 包含 两 部 分 , 即 游戏 画面 与 “重新 开始 ”按钮 .该 项 目的 游戏 画面 是 基于 HTML5 
Canvas API 实现 的 ， 所 有 的 游戏 内 容 将 在 元 素 <canvas> 内 部 呈现 。 
相关 HTML5 代码 片段 如 下 : 
<div id="container"> 
<h3> 基 于 HTMLS5 的 贪 吃 蛇 小 游戏 </h3> 
<h> 
<! 一 状态 信息 栏 -> 
…( 代 码 略 ) 
<!-- 设 置 游戏 画布 -> 
<canvas id="myCanvas" width="400" height="400" style="border 1px solid"> 
</canvas> 
<div> 
为 画布 标签 <canvas> 设 置 id="myCanvas", 以 便 后 续 使 用 JavaScript 进行 绘制 工作 。 设 置 <canvas> 
元 素 的 宽度 和 高 度 均 为 400 像素 ， 并 使 用 行内 样式 表 设置 画布 带 有 1 像素 宽 的 实际 边框 效果 。 
最 后 使 用 <button> 标 签 制作 “重新 开始 ”按钮 。 相 关 HIML5 代码 片段 如 下 : 
<body> 
<div id="container"> 
<!-- 页面 标题 -> 
<h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 
<!-- 水 平 线 -> 
<hr> 
<!- 游 戏 时 间 (代码 略 ) 一 > 
<!- 游 戏 画布 (代码 略 )--> 
<!- 游 戏 按钮 -> 
<div> 
<button> 重 新 开始 </button> 
</div> 
<ldiv> 
</body> 
当前 “重新 开始 ”按钮 仅 用 于 设计 布局 ， 单 击 后 暂 无 响应 事件 ， 后 续 会 在 JavaScript 中 为 其 增 
加 回调 函数 。 
在 CSS 文件 中 对 按钮 标签 <button> 进 行 样式 设置 : 尺寸 ， 宽度 为 200 像素 、 高 度 为 50 像素 ; 边 
距 ， 上 、 下 外 边 距 为 10 像素 ， 左 、 右 外 边 距 为 0 像素 ， 边框 ， 无 边框 效果 ; 字体， 字体 大 小 为 25 
像素 ， 加 粗 显示 ， 颜色， 字体 颜色 为 白色 ， 背 景 颜色 为 浅 珊瑚 红色 (lightcoraD)。 
相关 CSS 代码 片段 如 下 : 
设置 游戏 按钮 样式 */ 
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} 

用 户 还 可 以 为 <zbutton> 标 签 设置 鼠标 悬浮 时 的 样式 效果 ， 在 CSS 样式 表 中 用 button:hover 表示 。 
本 例 将 效果 设置 为 按钮 背景 颜色 的 改变 ， 换 成 颜色 加 深 的 珊瑚 红色 (coral)。 

相关 CSS 代码 片段 如 下 : 

履 设 置 鼠标 悬浮 时 的 按钮 样式 */ 

button:hover { 

background-color:coral; 

} 

此 时 整个 样式 就 全 部 设计 完成 了 ， 页 面 效果 如 图 13-14 所 示 。 

由 图 13-16 可 见 ， 对 贪 吃 蛇 游戏 的 布局 和 样式 要 求 已 初步 实现 。 目 前 尚未 实现 游戏 邮 辑 ， 这 些 
内 容 将 在 下 面 介绍 。 
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图 13-16 完成 的 效果 


13.2.3 ”数据 模型 的 设计 

将 游戏 画布 分 割 成 40 行 、40 列 ， 即 分 割 成 长 宽 均 为 10 像素 的 1600 个 网 格 。 画 布 中 的 蛇 身 就 
是 由 一 系列 连续 的 网 格 填充 颜色 后 组 成 的 ， 而 食物 是 由 单个 网 格 填充 颜色 后 形成 的 。 因 此 ， 只 要 知 
道 这 些 需要 填 色 的 网 格 的 坐标 ， 即 可 在 画布 上 绘制 出 蛇 身 与 食物 。 

1. 创建 贪 吃 蛇 模型 


设置 贪 吃 蛇 的 初始 身长 为 3 格 ， 以 蛇 头 出 现在 最 左 侧 第 2 行 并 且 向 右 移动 为 例 ， 动 态 过 程 如 
图 13-17 所 示 。 
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(a) 贪 吃 蛇 的 初始 位 置 。” (b) 蛇 头 向 右 伸展 的 过 程 (QO 展现 完整 蛇 身 
图 13-17 贪 吃 蛇 模 型 
图 13-17 中 标记 的 所 有 坐标 数据 对 应 的 都 是 网 格 的 左上 角 坐标 位 置 。 由 图 13-17(a) 可 见 , 贪 吃 蛇 
的 初始 位 置 出 现在 坐标 (0,10) 处 ， 使 用 浅 蓝 色 填充 ， 用 边 长 为 10 像素 的 网 格 表示 蛇 身 。 由 于 目前 规 
定向 右 移动 ， 因 此 随 着 每 次 刷新 游戏 内 容 ， 会 追加 填充 右 侧 的 空白 网 格 作为 蛇 身 ， 直 到 完整 蛇 身 在 
网 格 中 全 部 显现 ， 这 一 过 程 由 图 13-17(b) 和 图 13-17(c) 呈 现 。 
可 以 使 用 一 个 数组 来 记录 组 成 蛇 身 的 每 个 网 格 的 坐标 ， 并 依次 在 画布 的 指定 位 置 填充 颜色 ， 这 
样 即 可 形成 灸 吃 蛇 从 出 现 到 移动 ， 直 到 展现 完整 蛇 身 的 过 程 。 
例如 ， 向 右 移动 的 贪 吃 蛇 的 初始 坐标 可 以 记录 为 : 
var snakeMap =[{xX"0,'y "10}]; 
随 着 蛇 头 向 右前 进 ， 为 数组 增加 第 2 组 坐标 : 
snakeMap =[{"X":0,'y "10}], [{'x "10,'y":10}]; 
如 果 继 续 向 右前 进 ，， 就 为 数组 增加 第 3 组 坐标 : 
snakeMap =[{X "0,'y "10}], [{x":10,'y":10}], [{'x “20,'y":10}]; 
此 时 蛇 身 已 经 完整 显示 出 来 。 
2. 蛇 身 移动 模型 


当 蛇 身 已 经 完全 显示 在 游戏 画面 中 时 ， 如 果 蛇 头 继续 前 进 ， 则 需要 清除 蛇 尾 的 网 格 颜色 ， 以 表 
现 出 蛇 的 移动 效果 。 以 上 面 的 贪 吃 蛇 模型 为 例 ， 分 别 展 示 向 右 、 向 下 和 向 上 移动 的 效果 ,如 图 13-18 
所 示 。 

图 13-18(b) 显 示 的 是 贪 吃 蛇 的 蛇 身 己 全 部 显示 出 来 后 仍 继续 向 右前 进 的 效果 。 在 吃 到 食物 之 前 ， 
贪 吃 蛇 的 身长 将 保持 不 变 。 此 时 除了 需要 填充 右 侧 新 的 空白 网 格外 ， 还 需要 清除 最 早 的 蛇 身 网 格 颜 
色 , 以 实现 贪 吃 蛇 在 移动 的 动画 效果 。 图 13-18(e) 与 图 13-18(d) 显 示 的 是 贪 吃 蛇 分 别 向 下 和 向 上 移动 
的 效果 ， 原 理 与 图 13-18(b) 的 相同 。 

以 上 面 介绍 的 数组 snakeMap 为 例 继续 讲解 如 何 实现 贪 吃 蛇 的 移动 效果 。 

例如 继续 往 右 前 进 ， 为 数组 添加 新 坐标 ， 还 需要 删除 最 早 的 一 组 坐标 : 

snakeMap = [{'x":10,'y "10}] , [{ x "20,'y "10}]. [{x "30.'y"10}]: 

因为 数组 中 的 坐标 只 用 于 显示 当前 的 蛇 身 数据 ， 所 以 需要 去 掉 曾经 路 过 的 轨迹 。 这 种 绘制 方式 
可 以 展现 贪 吃 蛇 的 动态 移动 效果 。 因 此 ， 只 要 在 每 次 刷新 游戏 界面 时 保持 更 新 snakeMap 数组 的 记 
录 ， 即 可 获得 贪 吃 蛇 的 当前 位 置 。 
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(a) 贪 吃 蛇 的 初始 状态 (b) 蛇 头 向 右 移动 的 效果 


(©) 蛇 头 向 下 移动 的 效果 (q) 蛇 头 向 上 移动 的 效果 
图 13-18 贪 吃 蛇 蛇 身 的 移动 模型 


3. 蛇 吃食 物 模型 


在 贪 吃 蛇 的 移动 过 程 中 ， 如果 蛇 头 碰 到 食物 ， 则 认为 蛇 将 食物 吃 掉 了 。 此 时 蛇 的 身长 增加 一 格 ， 
并 且 食 物 消失 ， 然 后 在 随机 位 置 重新 出 现 。 同 样 以 初始 位 置 在 坐标 (0.10)、 身 长 为 3 格 的 贪 吃 蛇 模型 
为 例 ， 展 示 蛇 吃食 物 的 过 程 如 图 13-19 所 示 。 


(a) 贪 吃 蛇 的 初始 位 置 (b) 贪 吃 蛇 向 下 移动 准备 吃食 物 (©) 吞食 后 的 贪 吃 蛇 
图 13-19 蛇 吃 食物 模型 

由 图 13-19(a) 可 见 , 食物 位 于 蛇 头 的 正 下 方 , 因此 需要 控制 蛇 头 向 下 移动 来 接近 食物 图 13-19(b) 
显示 的 是 蛇 向 下 移动 一 格 的 效果 ， 此 时 蛇 头 已 经 贴 在 食物 边 上 了 。 图 13-19(c) 显 示 的 是 食物 被 吞食 
后 的 效果 ， 此 时 贪 吃 蛇 的 蛇 身 长 度 增 加 一 格 并 且 食 物 消失 。 

因此 ， 每 当 贪 吃 蛇 吃 到 食物 时 需要 将 表示 蛇 身 的 变量 t 自 增 1， 然 后 判断 用 于 记录 蛇 身 坐标 的 
数组 snakeMap 的 长 度 ， 如 果 与 当前 蛇 身 长 度 t 的 值 相同 ， 则 不 必 删 除 最 前 面 的 数据 。 

此 时 的 snakeMap 数组 坐标 为 : 

snakeMap=[{ x":10.'y "10}] . [{x "20.'y"10}], [{x "20,"y "20}], [{ x :20,'y "30}]; 
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13.2.4 ”游戏 的 逻辑 实现 


1. 准备 游戏 


首先 使 用 一 系列 变量 设置 贪 吃 蛇 的 初始 状态 ， 包 括 蛇 身长 度 、 首 次 出 现 的 位 置 和 移动 方向 等 。 
相关 JavaScript 代码 如 下 : 


大 一 

/游戏 参数 设置 

一 

1/ 蛇 身 长 度 

Var t=3; 

// 记 录 代 吃 蛇 的 运行 轨迹 ， 用 数组 记录 每 一 个 坐标 点 

Var snakeMap={ ]; 

// 蛇 身 单元 大 小 

Var Ww=10; 

/方向 代码 : 左 37， 上 38， 下 40 

Var derection=37; 

// 蛇 的 初始 坐标 

Var x=0; 

Var y=0; 

/ 夯 布 的 宽度 和 高 度 

Var width=400; 

Var height=400; 

/根据 id 找 出 指定 的 画布 

Var c=document.getElementById("“myCanvas"); 

// 创 建 2D 的 context 对象 

Var ctx=c.getContext("2d"): 

上 述 代码 设置 贪 吃 蛇 的 初始 状态 为 身长 3 格 ， 初 始 出 现 位 置 为 坐标 (0.0)， 并 且 向 右 移动 。 其 中 
用 于 记录 移动 方向 的 变量 derection 可 以 根据 实际 需要 自 定义 方向 对 应 的 数字 , 这 里 为 了 方便 按键 监 
听 效 果 ， 选 择 相应 的 按键 代码 以 表示 方向 。 

这 里 声明 蛇 身 单元 格 的 边 长 (w) 以 及 画布 的 宽度 (width) 和 高 度 (height) 是 为 了 方便 开发 者 后 续 修 
改 。 如 果 想 改变 游戏 界面 或 人 岛 吃 蛇 的 大 小 ， 只 需要 更 改 对 应 的 这 一 处 变量 的 值 ， 无 须 修改 其 他 逻辑 
代码 。 最 后 声明 的 ctx 对 象 是 为 了 后 续 用 于 游戏 画布 的 绘制 工作 。 

由 于 当前 贪 吃 蛇 的 初始 位 置 与 方向 为 固定 值 ， 这 样 会 降低 游戏 难度 与 可 玩 度 ， 因 此 在 游戏 启动 
方法 GameStart0 中 可 以 使 用 随机 数 重新 定义 焦 吃 蛇 初 始 出 现 的 位 置 和 移动 方向 ,以 便 每 次 刷新 页 面 
都 可 以 获得 不 同 的 游戏 效果 。 

JavaScript 中 GameStart0 方 法 的 初始 代码 如 下 : 

一 

/启动 游戏 

一 一 一 一 

function GameStartO{ 

// 随 机 生成 贪 吃 蛇 的 蛇 头 坐 标 

x=Math floor(Math random()* width/w)*w: 
y=Math floor(Math random()*height/w)*w: 
// 随 机 生成 贪 吃 蛇 的 前 进 方向 
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direction=37+Math floor(Math randomO*4): 

首先 需要 为 贪 吃 蛇 随机 产生 初始 位 置 坐标 9)， 并 且 其 中 x 和 y 的 值 必须 是 游戏 画布 中 任意 网 
格 的 左上 角 点 ， 这 样 才能 保证 蛇 身 的 位 置 不 发 生 偏 移 。 

由 于 游戏 画布 的 长 度 和 宽度 均 为 400 像素 ， 因 此 画布 中 任意 网 格 的 坐标 规律 为 : 

(row*10, col*10) 

其 中 ，row 指 的 是 当前 网 格 的 行 数 ，col 指 的 是 当前 网 格 的 列 数 。 注 意 ， 这 里 的 行 数 与 列 数 均 从 
0 开始 计数 。 例 如 游戏 画布 中 第 2 行 、 第 3 列 的 网 格 的 坐标 为 2*10, 3*10)， 即 (20.30)。 因 此 ， 只 需 
要 随机 产生 0~39 的 行 数 和 列 数 ， 即 可 乘 以 网 格 边 长 换算 出 坐标 位 置 。 

在 JavaScript 中 ，Mathrandom0 可 以 产生 位 于 [0,1] 区 间 的 随机 数 ， 因 此 在 这 里 使 用 
Math randomO*width/w， 表 示 用 随机 数 乘 以 画布 的 宽度 ， 再 除 以 网 格 边 长 ， 可 获得 位 于 [0,40] 区 间 的 
随机 数 。 由 于 此 处 画布 的 宽度 与 高 度 相 等 ,因此 ,使 用 Math randomO*#height/w 同样 可 以 产生 位 于 [0,40] 
区 间 的 随机 数 。 使 用 Math.floor0 函 数 是 为 了 去 掉 小 数 点 后 的 数字 ， 这 样 才能 确保 最 后 的 随机 数 为 指 
定 范围 内 的 整数 。 最 后 再 乘 以 网 格 边 长 w， 即 可 符合 画布 中 任意 网 格 的 坐标 规律 。 

表示 蛇 头 前 进 方向 的 变量 direction 为 了 和 键盘 上 方向 键 对 应 的 代码 保持 一 致 ,只 能 是 位 于 [37,40] 
区 间 的 数字 。 因 此 ， 同 样 先 使 用 Math random0O*#4 获取 位 于 [0.4] 区 间 的 数字 ， 再 用 Math.floor0 函 数 
去 掉 小 数 点 后 的 内 容 ， 变 成 整数 ， 最 后 加 上 37 即 可 获得 位 于 [37,41) 区 间 的 整数 。 

此 时 游戏 的 初始 化 工作 基本 完成 ， 接 下 来 介绍 如 何 动态 地 绘制 蛇 身 的 移动 过 程 。 


2. 绘制 蛇 身 


每 次 刷新 游戏 画面 时 ， 蛇 头 只 需要 往 指定 方向 前 进 一 格 。 如 果 没有 吃 到 新 的 食物 ， 那 么 还 需要 
清除 原先 蛇 尾 最 后 一 个 位 置 的 颜色 ， 以 表现 出 贫 吃 蛇 动 态 前 进 一 格 的 效果 。 
在 JavaScript 中 声明 drawSnake0 方 法 ， 专 门 用 于 绘制 贪 吃 蛇 。 


ctx-fillRect(x,y, ww); 

// 数 组 只 保留 蛇 身 长 度 的 数据 ， 如 果 贪 吃 蛇 前 进 了 ， 则 删除 最 旧 的 坐标 数据 

if (snakeMap.length>t){ 
/删除 数组 的 第 一 项 ， 即 蛇 尾 最 后 一 个 位 置 的 坐标 
varlastBox=snakeMap.shiftO: 
/清除 蛇 尾 最 后 一 个 位 置 的 坐标 ， 从 而 实现 移动 效果 
ctx.clearRect(lastBox[ x].lastBox[y'],ww): 

} 

站 


由 于 要 通过 刷新 游戏 画面 才能 实现 动画 效果 ， 因 此 在 JavaScript 中 声明 gameRefresh0 方 法 ， 专 
门 用 于 刷新 画布 。 在 该 方法 中 调用 drawSnake0 方 法 ， 绘 制 贪 吃 蛇 的 蛇 身 变化 过 程 。 
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在 JavaScript 中 ，gameRefresh0 方 法 的 初始 代码 如 下 : 


一 
/游戏 画面 刷新 函数 
一 
fonction gameRefreshO{ 
/将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
snakeMap.push({ 


drawSnake(); 
// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
switch(direction){ 
/ 左 37 
Case 37: 
xX—wW; 
break: 
/上 38 
Case 38: 
by 


最 后 , 在 GameStart0 函 数 中 设置 在 过 了 间隔 规定 的 时 间 后 , 重复 调用 gameRefresh0 以 达到 刷新 
游戏 画面 的 效果 。 修 改 后 的 GameStart0 函 数 如 下 : 


Ws 
// 启 动 游戏 
Ns 
fnction GameStartO{ 
/随机 生成 贪 吃 蛇 的 蛇 头 坐 标 
…( 代 码 略 ) 
/随机 生成 贪 吃 蛇 的 前 进 方向 
…( 代 码 略 ) 
/| 每 隔 200 毫秒 刷新 一 次 游戏 内 容 
setInterval("gameRefresh()".200): 
} 


其 中 ，200 指 的 是 游戏 画面 每 隔 200 毫秒 刷新 一 次 ， 该 数值 可 自 定义 。 为 方便 开发 者 后 续 修改 ， 
也 可 以 将 这 里 的 200 改 为 变量 tme， 并 在 游戏 的 初始 化 参数 中 对 变量 time 进行 初始 化 声明 。 
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相关 JavaScript 代码 如 下 : 

/QQ 

// 设 置 游戏 参数 

大 一 

/刷新 游戏 界面 的 间隔 时 间 ( 数 字 越 大 ， 蛇 的 速度 越 慢 ) 
var time=200; 
…( 后 续 代码 略 ) 

运行 效果 如 图 13-20 所 示 。 


(a) 贪 吃 蛇 的 初始 位 置 人 贪 吃 蛇 向 左前 进 (© 贪 吃 蛇 完全 出 现 
图 13-20 ”绘制 贪 吃 蛇 的 蛇 身 


在 图 13-20 中 , 贪 吃 蛇 在 随机 位 置 出 现 后 以 随机 方向 (本 例 为 向 右 ) 开 始 前 进 , 直到 整个 蛇 身 出 现 
并 继续 前 进 。 由 于 此 时 尚未 获取 用 户 的 按键 指令 ， 因 此 目前 贪 吃 蛇 只 能 按照 初始 方向 一 直 前 进 。 


3. 处 理 蛇 头 的 移动 


贪 吃 蛇 是 依靠 玩家 按 下 键盘 上 的 方向 键 进行 上 、 下 、 左 、 右 方向 切换 的 ， 因 此 首先 在 JavaScript 
中 使 用 document 对 象 的 onkeydown 方法 监听 并 获取 用 户 按键 。 
JavaScript 中 按键 监听 的 完整 代码 如 下 : 


/一 -一 一 
/改变 蛇 前 进 方向 的 按键 监听 
GO 
document.onkeydown=function(e){ 
/根据 按键 更 新 前 进 方向 : 左 37， 上 38， 右 39， 下 40 
让 (ekeyCode 一 37|ekeyCode 一 38|ekeyCode 一 39|ekeyCode 一 40) 
direction=e keyCode: 


} 

由 于 只 需要 监听 键盘 上 的 方向 键 ， 并 且 与 这 些 方向 键 顺 时 针 旋转 左 、 上 、 右 、 下 对 应 的 数字 代 
码 是 37~40， 因 此 只 考虑 这 4 种 情况 ， 并 且 直 接 将 按键 的 代码 赋值 给 表示 方向 的 变量 direction， 以 
便 后 续 判断 。 加 上 按键 监听 后 的 运行 效果 如 图 13-21 所 示 。 

4. 绘制 随机 位 置 的 食物 

接 下 来 需要 在 页 面 上 为 贪 吃 蛇 绘 制 食物 。 食 物 每 次 将 在 随机 网 格 位 置 出 现 ， 占 一 格 位 置 。 食 物 


每 次 只 在 画面 中 呈现 一 个 ， 直 到 被 蛇 头 触 碰 表示 吃 掉 才 可 在 原先 的 位 置 消除 并 在 下 一 个 随机 位 置 重 
新 产生 。 
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(a) 贪 吃 蛇 正 在 前 进 (5) 贪 吃 蛇 改 变 方向 
图 13-21 改变 贪 吃 蛇 的 方向 


在 JavaScript 中 声明 drawFood0 方 法 ， 用 于 在 游戏 画布 的 随机 位 置 绘制 食物 ， 代 码 如 下 : 
/一 一 一 一 
/食物 绘制 函数 
一 一 一 
function drawFoodO{ 
/随机 食物 的 坐标 


} 

这 里 随机 产生 的 食物 坐标 (x,y) 与 灸 吃 蛇 的 初始 位 置 坐标 要 求 一 样 ， 必 须 是 游戏 画布 中 任意 网 格 
的 左上 角 点 ， 因 此 同样 使 用 Math random(0) 来 获取 随机 数 。 然 后 设置 食物 为 红色 ， 并 使 用 fillRect0 
函数 进行 颜色 的 填充 。 

修改 JavaScript 中 的 GameStart0 方 法 ， 在 绘制 贪 吃 蛇 之 前 添加 drawFoodO 函 数 来 绘制 食物 。 修 
改 后 的 相关 代码 如 下 : 


We = 2 
// 启 动 游戏 
1 
function GameStartO{ 
/调用 drawFood0 函 数 ， 在 随机 位 置 绘制 第 一 个 食物 
drawFood0; 
/随机 生成 贪 吃 蛇 的 蛇 头 坐 标 
…( 代 码 略 ) 
/随机 生成 蛇 的 前 进 方向 
…( 代 码 略 ) 
/| 每 隔 time 毫秒 刷新 一 次 游戏 内 容 
…( 代 码 略 ) 
} 


添加 食物 后 的 运行 效果 如 图 13-22 所 示 。 
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图 13-22 在 随机 位 置 生成 食物 
此 时 还 不 能 完成 吃食 物 的 动作 ， 将 在 下 面 介绍 相关 内 容 。 


5. 对 吃 到 食物 的 判定 


当 蛇 头 与 食物 出 现在 同一 网 格 中 时 ， 判 定 贪 吃 蛇 吃 到 了 食物 ， 此 时 食物 消失 、 当 前 分 数 增加 10 
分 、 蛇 身 增加 一 格 ， 并 且 在 随机 位 置 重新 生成 下 一 个 食物 。 
在 JavaScript 中 修改 后 的 gameRefresh0 方 法 如 下 : 


一 一 一 一 
/游戏 画面 刷新 函数 
一 一 一 
function gameRefreshOf 
/将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
…( 代 码 略 ) 
/| 综 制 贪 吃 蛇 
…( 代 码 略 ) 
/根据 方向 移动 蛇 头 的 下 一 个 位 置 
…( 代 码 略 ) 
// 碰 接 检测 ， 返 回 值 为 0 表示 没有 撞 到 障碍 物 
…( 代 码 略 ) 
// 对 到 食物 的 判定 
if (foodX—x && foodY—y){ 
/ 吃 到 一 次 食物 加 10 分 
scoret+=10; 
/更 新 状态 栏 中 的 当前 分 数 
Var currentScore=document.getElementById("currentScore"); 
currentScore.innerHTMIL=score; 
/在 随机 位 置 绘制 下 一 个 食物 
drawFood0; 
/将 蛇 身 的 长 度 加 1 
tt; 
} 
和 


这 里 使 用 document.getElementById0 方 法 找到 状态 栏 中 用 于 显示 当前 分 数 的 元 素 对 象 ， 并 将 内 
容 更 新 为 最 新 分 值 。 
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运行 效果 如 图 13-23 所 示 。 


(a) 贪 吃 蛇 向 食物 前 进 (b) 贪 吃 蛇 吃 到 第 一 个 食物 
图 13-23 贪 吃 蛇 吃食 物 的 过 程 


其 中 ， 图 13-23(a) 是 尚未 吃 过 食物 的 贪 吃 蛇 向 食物 前 进 的 画面 ， 此 时 蛇 身 长 度 为 3 个 网 格 ， 当 
前 分 数 为 0 分 ， 图 13-23(b) 是 贪 吃 蛇 已 经 吃 到 第 一 个 食物 的 画面 ， 此 时 蛇 身长 度 增加 为 4 个 网 格 ， 
并 且 将 当前 分 数 更 新 为 10 分 。 


6. 碰撞 检测 


蛇 头 碰 到 游戏 画布 的 任意 一 边 或 碰 到 贪 吃 蛇 自身 均 判定 游戏 失败 ， 此 时 弹出 提示 告知 玩家 游戏 
失败 的 原因 ， 并 显示 当前 分 数 。 如 果 本 局 得 分 打破 历史 纪录 ， 就 使 用 HIML5 Web 存储 API 中 的 
localStorage 对 象 更 新 存储 的 数据 。 玩 家 单 击 提示 框 中 的 “确定 ”按钮 后 ， 可 以 开始 下 一 局 游戏 。 

在 JavaScript 中 首先 创建 函数 用 于 贪 吃 蛇 与 障碍 物 的 碰撞 检测 。 碰 撞 检 测 需要 检测 两 种 可 能 性 ， 
一 种 是 蛇 头 撞 到 四 周 的 墙壁 ， 另 一 种 是 蛇 头 碰 到 了 蛇 身 。 无 论 哪 一 种 情况 发 生 ， 都 判定 游戏 失败 。 

detectCollision0 方 法 的 完整 代码 如 下 : 


一 
/碰撞 检测 函数 
一 一 一 
fonction detectCollisionO{ 
// 蛇 头 撞 到 四 周 的 墙壁 ， 游 戏 失败 
if (x>widthlly>heightlx<Olly<O){ 
Tetum 1; 
} 
// 蛇 头 碰 到 蛇 身 ， 游 戏 失败 
for (var i=0:i<snakeMap length:it +){ 
if (snakeMap[i] x—x &é& snakeMapli] y—y){ 
Tetum 2; 
} 
} 
Tetum 0; 
} 
该 方法 有 3 个 返回 值 ， 它 们 分 别 表示 不 同 的 含义 。 
返回 值 为 0: 表示 蛇 头 没有 碰 到 障碍 物 ， 游 戏 继续 。 
返回 值 为 1: 表示 蛇 头 碰 到 游戏 画布 任意 一 边 的 墙壁 ， 游 戏 失败 。 
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返回 值 为 2 表示 蛇 头 碰 到 蛇 身 ， 游 戏 失败 。 

在 JavaScript 中 修改 gameRefresh0 方 法 ， 在 根据 方向 移动 蛇 头 位 置 的 switch 语句 后 面 添加 游戏 
失败 判定 的 相关 代码 ， 通 过 判断 detectCollision0 方 法 的 返回 值 来 确定 当前 的 游戏 状态 。 修 改 后 的 
gameRefresh0 方 法 如 下 ， 加 上 碰撞 检测 后 的 游戏 运行 效果 如 图 13-24 所 示 。 

RE 

/游戏 画面 刷新 函数 

Ls 

/将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
…( 代 码 略 ) 

// 绘 制 贪 吃 蛇 

…( 代 码 略 ) 

/根据 方向 移动 蛇 头 的 下 一 个 位 置 

…( 代 码 略 ) 

/碰撞 检测 ， 返 回 值 为 0 表示 没有 撞 到 障碍 物 


Var code=detectCollision0; 
/如 果 返 回 值 不 为 0， 表示 游戏 失败 
if(code!=0){ 
/如 果 当 前 得 分 高 于 历史 最 高 分 ， 则 更 新 历史 最 高 分 
if (score>bestScore) 
localStorage.setItem("'bestScore",score); 
/返回 值 为 1 表示 接 到 墙壁 
if (code—1){ 
alert(" 挤 到 了 墙壁 ， 游 戏 失败 ! 当前 得 分 : "+score); 


} 
// 返 回 值 为 2 表示 撞 到 蛇 身 
elseif (code—2){ 
alert(" 挤 到 蛇 身 ， 游 戏 失败 ! 当前 得 分 : "+score); 
» 
// 重 新 加 载 页 面 
window.location.reload0; 


(a) 贪 吃 蛇 碰 到 墙壁 () 贪 吃 蛇 碰 到 蛇 身 
图 13-24 贪 吃 蛇 的 碰撞 检测 
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7. 显示 历史 最 高 分 


这 里 将 介绍 如 何在 状态 栏 中 显示 历史 最 高 分 。 使 用 HTML5 Web 存储 API 中 的 localStorage 进 
行 历史 最 高 分 的 读 取 。 在 JavaScript 中 声明 showBestScore0 方 法 ， 用 于 获取 并 在 状态 栏 中 展示 历史 
最 高 分 。 

JavaScript 中 showBestScore0 方 法 的 完整 代码 如 下 : 


大 一 一 一 一 一 
/显示 历史 最 高 分 
大 一 一 
function showBestScoreO{ 
/从 本 地 存储 数据 中 读 取 历史 最 高 分 
bestScore=localStorage.getItem("bestScore"); 
/如 果 尚 未 记录 最 高 分 ， 则 重 置 为 0 
if(bestScore—null) 
bestScore=0; 
/将 历史 最 高 分 更 新 到 状态 栏 中 
Var best=document.getElementById("bestScore"); 
best.innerHTML=bestScore; 
} 
首先 从 localStorage 中 根据 键 名 bestScore 查找 历史 最 高 分 。 如 果 为 空 值 ， 则 表示 尚未 存储 历史 
最 高 分 ， 因 此 将 空 值 重 置 为 0， 最 后 将 获取 的 历史 最 高 分 更 新 到 信息 展示 区 。 相 关 代码 修改 后 如 下 
所 示 ， 运 行 效果 如 图 13-25 所 示 。 
人 一 一 一 一 一 一 
// 设 置 游戏 参数 
一 
…( 代 码 略 ) 
// 获 得 历史 最 高 分 
showBestScore0; 
/开始 游戏 
GameStart|; 
D; 


图 13-25 显示 历史 最 高 分 为 50 分 
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图 13-25 中 显示 的 是 历史 最 高 分 为 50 分 的 情况 ， 当 游戏 分 数 超过 历史 最 高 分 时 , 将 会 更 新 历史 


8. 重新 开始 游戏 


重新 开始 游戏 有 两 种 方式 ， 一 种 是 当 贪 吃 蛇 碰撞 到 墙壁 或 自身 导致 游戏 失败 时 自动 重新 开始 游 
戏 ， 另 一 种 是 当 单 击 “ 重 新 开始 ”按钮 时 强制 重新 开始 游戏 。 

可 以 直接 使 用 window.location.reload0 方 法 重新 加 载 游戏 ， 以 达到 刷新 页 面 的 作用 。 

为 “重新 开始 ”按钮 添加 按键 监听 ， 修 改 后 的 代码 如 下 : 


<button onClick="window.location.reload0"> 重 新 开始 </button> 


在 游戏 画面 刷新 函数 gameRefresh0 中 找到 碰撞 检测 的 相关 代码 ， 在 判断 碰 到 物体 时 同样 添加 
window.location reload() 方 法 以 达到 刷新 游戏 的 效果 。 
gameRefresh() 方 法 修改 后 的 代码 如 下 : 


一 
/游戏 画面 刷新 函数 
一 
function gameRefreshOf{ 
/将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
…( 代 码 略 ) 
/| 绘制 贪 吃 蛇 
…( 代 码 略 ) 
/根据 方向 移动 蛇 头 的 下 一 个 位 置 
…( 代 码 略 ) 
/碰撞 检测 ， 返 回 值 为 0 表示 没有 碰 到 障碍 物 
Var code=detectCollision0; 
/如 果 返 回 值 不 为 0， 表 示 游 戏 失败 
if(code!=0){ 
…( 代 码 略 ) 
/重新 加 载 页 面 
windowJlocation reload0; 
} 
} 


此 时 所 有 的 代码 就 全 部 完成 了 。 
13.2.5 ”游戏 的 完整 代码 
HIML5 和 CSS 的 完整 代码 请 在 本 书 的 附 赠 资 料 中 查看 。 
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